当我取消隐藏时，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

DEMO

使用fadeIn duration complete回调函数

动画完成后调用的函数

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

参考

.closest()

更好的代码

DEMO

$("#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 的评论后更新

DEMO

$("#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>")
    });
});