jquery - 当我取消隐藏时，jQuery 追加到最近的元素

Question

嗨，我有 jQuery 函数，它显示已勾选的前三个元素并隐藏其余元素。我有一个功能，可以通过单击添加按钮一次隐藏一个复选框。

我想更进一步，最初我有一个静态删除按钮，但是现在我想让这个“删除按钮”附加 jQuery，因为我只希望这个按钮在用户点击添加时可见，它会删除相应的tr。

我有要删除的代码只是不附加它似乎将它添加到所有行中，这很明显，因为我提到了一个类。而不是某个特定的地方，但我不确定我应该如何实现这一点。

非常欢迎任何帮助！

我的代码在下面或查看jsfiddle

  $("#add").click(function () {
        $(".contact_numbers:hidden:first").fadeIn("slow");
        $( ".contact_numbers" ).append( "<a href='#' class='remove'>Remove</a>");
    });

Answer 1

演示

使用fadeIn持续时间完成回调函数

动画完成后调用的函数

$("#add").click(function () {
    $(".contact_numbers:hidden:first").fadeIn("slow", function () {
        $(this).closest('.contact_numbers').append("<a href='#' class='remove'>Remove</a>")
    });
});

参考

.closest()

更好的代码

演示

$("#add").click(function () {
    $(".contact_numbers:hidden:first").fadeIn("slow", function () {
        $(this).closest('.contact_numbers').find('.remove').remove();
        $(this).closest('.contact_numbers').append("<a href='#' class='remove'>Remove</a>")
    });
});

在 Op 的评论后更新

演示

$("#add").click(function () {
    $(".contact_numbers:hidden:first").fadeIn("slow", function () {
        $(this).closest('.contact_numbers').find('.remove').remove();
        $(this).closest('.contact_numbers').find('td:last').append("<a href='#' class='remove'>Remove</a>")
    });
});