jquery - 删除所有其他行后删除标题行

Question

我有一个看起来像这样的表:

<table>
<tr id="header">
    <th>Title</th>
    <th>Title</th>
</tr>
<tr id="1" class="record">
    <td><a class="delbutton">X</a></td>
    <td>Some Data</td>
</tr>
<tr id="2" class="record">
    <td><a class="delbutton">X</a></td>
    <td>Some Data</td>
</tr>
</table>

我有一个 jQuery 脚本:

$(function() {
    $(".delbutton").click(function(){

        //Save the link in a variable called element
        var element = $(this);

        //Find the id of the link that was clicked
        var del_id = element.attr("id");

        //Built a url to send
        var info = 'del_id=' + del_id;
        if(confirm("Are you sure you want to delete this entry?  This cannot be undone.")) {
            $.ajax({
                type: "GET",
                    url: "delete_entry.php",
                    data: info,
                    success: function(){
            }
        });

        $(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast")
        .animate({ opacity: "hide" }, "slow");
    }
    return false;
    });
});

我想要做的是删除标题行(id =“header”)，或者更好的是，删除最后一个数据行后的剩余表格。

任何指导都会很棒

更新:按照汤姆的建议后，我尝试计算行数。我尝试过:

$('.record').size()

但它总是报告初始行数 - 在我删除一行后它永远不会准确报告行数。是否可以以某种方式仅跟踪剩余的行？

分辨率这有效:

$(function() {
    $(".delbutton").click(function(){

        //Save the link in a variable called element
        var element = $(this);

        //Find the id of the link that was clicked
        var del_id = element.attr("id");

        //Built a url to send
        var info = 'del_id=' + del_id;
        if(confirm("Are you sure you want to delete this entry?  This cannot be undone.")) {
            $.ajax({
                type: "GET",
                    url: "delete_entry.php",
                    data: info,
                    success: function(){
            }
        });

        $(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast")
        .animate({ opacity: "hide" }, "slow");
                    //Remove - don't just hide                        
                    $(this).parents(".record").remove();

                    //If there are no more deleteable rows, delete the header
        if($('.record').length == 0) {
            $('#existTitle').animate({ backgroundColor: "#fbc7c7" }, "fast").animate({ opacity: "hide" }, "slow");
        }
    }
    return false;
    });
});

Answer 1

您可能希望将动画用于隐藏条件中的行

if(confirm("Are you sure you want to delete this entry?  This cannot be undone.")) {
  $.ajax({
    type: "GET",
    url: "delete_entry.php",
    data: info,
    success: function() {
      // change this animation to whatever you want
      $(this).parent().animate({ opacity: "hide" }, "slow");
    }
}

这样，只有当用户确认要删除时，该行才会消失。然后，与该动画一起，进行另一次检查以查看是否还有剩余行(使用子级或兄弟级和 .size() )如果不使用相同的代码隐藏标题行(使用您选择的动画):

  $("#header").animate({ opacity: "hide" }, "slow");