如何删除单击其按钮的行？

Question

我在 cshtml 页面中有表格标签并通过 ajax 附加 tr 和 td，现在我不知道当我单击它时如何说删除行，此外我不知道如何获取每行中输入的值。

/// <reference path="jquery-2.2.4.js"/>

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "api/ProductsApi/GetProducts",
        success: function (Products) {
            debugger;
            let item0 = '<tr>' +
                '<th>d</th>' +
                '<th>d</th>' +
                '<th>d</th>' +
                '<th>d</th>' +
                '<th>d</th>' +
                '</tr>';
            $("#AdminProductList").append(item0);
            for (var i = 0; i < Products.length; i++) {
            var d = Products[i].split("/");
            let item = '<tr >' +
                '<td><img src="/locker/' + d[0] + ' "alt="gnjh "  style="width:70px;height:70px" /></td>' +
                '<td>'+d[3]+'</td>' +
                '<td>'+d[2]+'</td>'+
                '<td>' + d[1] + '</td>' +
                '<input id="AdminProductId'+i+'" type="hidden" value="'+d[5]+'" />'+
                '<td id="'+i+'">' +
                '<button data-toggle="tooltip" value="'+d[5]+'" class="pd-setting-ed eachEdit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i><input  type="hidden" value="' + d[5] +'"/></button>' +
                
                '<button   data-toggle="tooltip" title="Trash" class="pd-setting-ed eachTrash"><i class="fa fa-trash-o" aria-hidden="true"></i></button>' +
                '</td>' +
                '</tr>';
                $("#AdminProductList").append(item);
                
        }

           
            
        },
        error: function (f) {
            debugger;
            alert("nashod");

        }
    });
   
})

<div id="ListPage" style="display:none" class="product-status mg-tb-15">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="product-status-wrap" style="direction:rtl;">
                    <h4>f</h4>
                    
                    <button style=" border: 0;width: 270px;padding: 10px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;display: block;text-decoration: none;text-align: center;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size: 1.2em;color: #FFF;background: #bc3737;-webkit-box-shadow: 0 3px 1px #950d0d;-moz-box-shadow: 0 3px 1px #950d0d;box-shadow: 0 3px 1px #950d0d;" class="add-product" id="Edit"> افزودن محصول</button>
                    <table id="AdminProductList" style="direction:rtl;">
                       
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

当我点击时，我不知道怎么说，按 id.................................
..................................................... ..................................... ..................................................... ………… ..................................................... ..................................................... …………………………………………………………………………………………………………………… ..................................................... ..................... . .....................

Answer 1

我认为您应该向表行添加一个事件侦听器以删除它们：

$(document).on('click', '#AdminProductList>tr', function(){
  $(this).remove()
});

如果你想获取输入值，实际上有很多方法可以做到。如果你想得到所有的输入值，你可以像这样遍历它们：

function getInputValues(){
 $('tr input').each(function(){
   console.log($(this).val());
 });
}

Answer 2

试试这样：

  $.ajax({
        type:'POST',
        url:'delete.php',
        data:{del_id:del_id},
        success: function(data){
             if(data=="YES"){
                 $ele.fadeOut().remove();
             }else{
                 alert("can't delete the row")
             }
        }

         })
    })

Answer 3

$('button').click(function(){
       var tr =   $(this).closest('tr');
       var inputs = tr.find('input');
       alert($(inputs[0]).val());
       alert($(inputs[1]).val());
       tr.remove();

    })

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>

 
  <tr>
    <td><input type="text" /></td>
    <td>Hidden value here<input type="hidden" value="test hidden" /></td>
    <td><button>Remove</button></td>
  </tr>
 
</table>

你可以使用这个脚本

$('button').click(function(){
   $(this).closest('tr').remove();
})

或者写点击方法

<button click="remove(this)"  data-toggle="tooltip" title="Trash" class="pd-setting-ed eachTrash"><i class="fa fa-trash-o" aria-hidden="true"></i></button>

function remove(item){
$(item).closest('tr').remove();
}

更新：我为获取输入值创建了一个演示。

 var inputs = tr.find('input');
       alert($(inputs[0]).val());
       alert($(inputs[1]).val());

Answer 4

您需要为删除按钮添加单击事件处理程序，然后删除该特定行。 我已编辑您的代码以添加事件侦听器并删除元素。

/// <reference path="jquery-2.2.4.js"/>

$(document).ready(function () {
    window.deleteTableRow = function (selector) { $('tr'+selector).remove(); }
    $.ajax({
        type: "GET",
        url: "api/ProductsApi/GetProducts",
        success: function (Products) {
            debugger;
            let item0 = '<tr>' +
                '<th>d</th>' +
                '<th>d</th>' +
                '<th>d</th>' +
                '<th>d</th>' +
                '<th>d</th>' +
                '</tr>';
            $("#AdminProductList").append(item0);
            for (var i = 0; i < Products.length; i++) {
            var d = Products[i].split("/");
            let item = '<tr class="data-delete-index-'+ i +'">' +
                '<td><img src="/locker/' + d[0] + ' "alt="gnjh "  style="width:70px;height:70px" /></td>' +
                '<td>'+d[3]+'</td>' +
                '<td>'+d[2]+'</td>'+
                '<td>' + d[1] + '</td>' +
                '<input id="AdminProductId'+i+'" type="hidden" value="'+d[5]+'" />'+
                '<td id="'+i+'">' +
                '<button data-toggle="tooltip" value="'+d[5]+'" class="pd-setting-ed eachEdit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i><input  type="hidden" value="' + d[5] +'"/></button>' +

                '<button onclick="deleteTableRow(\'.data-delete-index-'+ i +'\')"   data-toggle="tooltip" title="Trash" class="pd-setting-ed eachTrash"><i class="fa fa-trash-o" aria-hidden="true"></i></button>' +
                '</td>' +
                '</tr>';
                $("#AdminProductList").append(item);

        }



        },
        error: function (f) {
            debugger;
            alert("nashod");

        }
    });

})