Question

我有两个表格，我想要删除一个特定的行，这意味着来自#tr中的#table2或#tr中的#table1以及成功后的jquery Ajax

请帮帮我

感谢您的帮助。

我还添加了jquery代码......

<table id="table1">
<tbody>
<tr id="tr1"><td>row1</td></tr>
<tr id="tr2"><td>row2</td></tr>
<tr id="tr3"><td>row3</td></tr>
<tr id="tr14"><td>row4</td></tr>
</tbody>
</table>

<table id="table2">
<tbody>
<tr id="tr1"><td>row1</td></tr>
<tr id="tr2"><td>row2</td></tr>
<tr id="tr3"><td>row3</td></tr>
<tr id="tr4"><td>row4</td></tr>
</tbody>
</table>

   $(document).off("click", ".removeUserType").on("click", ".removeUserType", function () {
        var userTypeId = $(this).closest("tr").attr("id");
        var currentElement = $(this);
        var menuId = "<?php echo $menuId; ?>";
        var todoStatus = "remove";
        
        $.ajax({
            metod: "POST",
            url: "page.php",
            data: {todoStatus: 'remove', userTypeId: userTypeId, menuId: menuId, removeTr: removeTr},
            success: function (response) {
                console.log(response);
                notification("success");

                currentElement.closest("tr").remove(); 


            },
            error: function (err) {
                //alert("Error");                    
                notification("error");
            }

        });


    });

我也添加了我的js代码。

Answer 1

您的代码存在问题you are using same id's for multiple tr's。

更改您的代码并为所有tr提供一个公共类，并在该类名上放置一个事件监听器，该监听器在点击时激活并使用this删除当前的tr

Answer 2

您可以使用nth-child选择器选择第N个元素。在上面的情况中，您可以从每个id元素中删除那些额外的tr，然后只有：

$('#table2 tbody tr:nth-child(2)').remove();

这将从第二个表中删除第二行。

remove()方法是同步的，因此您可以在下一行删除它之后运行您想要发生的任何内容。

Fiddle

修改

如果你真的想用回调来做，你可以使用$.when：

$.when($('#table2 tbody tr:nth-child(2)').remove()).then(callback);

Answer 3

            $(document).off("click", ".removeUserType").on("click", ".removeUserType", function () {
        var userTypeId = $(this).closest("tr").attr("id");
        var menuId = "<?php echo $menuId; ?>";
        var todoStatus = "remove";
        $("#" + userTypeId).remove(); // THIS IS WORKING 

        $.ajax({
            metod: "POST",
            url: "page.php",
            data: {todoStatus: 'remove', userTypeId: userTypeId, menuId: menuId, removeTr: removeTr},
            success: function (response) {
                console.log(response);
                notification("success");
                
                $("#" + userTypeId).remove(); // THIS IS NOT WORKING 


            },
            error: function (err) {
                //alert("Error");                    
                notification("error");
            }

        });

removeTr.remove（）;正在ajax块之外工作但不在ajax块内工作

Answer 4

我认为你正在努力实现以下目标：

HTML CODE：

<table id="table1">
<tbody>
<tr><td><a href="javscript;" class="remove">row1</a></td></tr>
<tr><td><a href="javscript;" class="remove">row2</a></td></tr>
<tr><td><a href="javscript;" class="remove">row3</a></td></tr>
<tr><td><a href="javscript;" class="remove">row4</a></td></tr>
</tbody>
</table>

脚本代码：

     $(document).on("click",".remove",function(){

                var current_element = $(this);
                var url = "your ajax url";

                jQuery.ajax({
                  url: url,
                  type:'POST',
                  success:function(data){
                      if(data == 1)/*Check success*/
                      {
                           current_element.closest("tr").remove();

                      }
                  }
                });
    });

从jquery ajax中的表中删除行

4 个答案: