JQuery添加后移除

Question

Fiddle: http://jsfiddle.net/YbfZG/4/由于我很少使用jsfiddle，所以toggleDiv/removeDiv函数不起作用，但希望这能让你更好地理解我的目标。

我有一个页面，用户可以通过从下拉菜单中进行选择来动态添加项目（divs），这是通过.append()实现的。他们还可以删除项目(.remove())并可能重新添加它。每个div都包含一个通过点击链接触发的隐藏/显示区域。

第一次将div添加到页面时，隐藏/显示区域可以正常工作。如果删除相同的div然后重新添加，隐藏/显示就不再起作用了。我认为这是因为该div没有完全从DOM中删除，因此基于id操作的hide/show函数无法找到正确的div来操作。

我尝试修改我的remove函数为$(this).empty().remove();但那没有起作用。我也尝试使用detach，但功能没有改变。我阅读了一些资料，可能需要使用.on()，但我不知道如何构建它。

ETA：附加和切换代码，并更改div名称，使其不仅仅是数字（我的笔误）。

- shimmoril

---

没有足够的信息来帮助您。 您应该向我们展示添加div的代码。 最好的方法是组装一个fiddle，您肯定会得到一个可以帮助您的答案。 - Adriano Carneiro

你的隐藏/显示代码是什么？ - ninja

除非您使用的是HTML5，否则数字“id”值无效。 - James Montagne

@JamesMontagne - 是的，那是个打字错误。已经修改了。 - shimmoril

Answer 1

如果您将标记更改为以下内容，那么将会更容易：

<div id="8" class="wrapper">
    <div>
    <a title="Remove" class="remove" href="#">Remove</a>
    </div>
</div>

基本上我给主要的 div 添加了一个“wrapper”类，给删除链接添加了一个“remove”类。

因此，您将摆脱 onclick 属性，改用一个简单的函数：

$('body').on('click','a.remove',function(){
    $(this).closest('div.wrapper').remove();
});​

演示

---

给出你的完整代码后，以下是如何使其运行的方法(演示)：

$(function() {

    $('.elements').on('click', '.remove', function() {
        $(this).closest('div[id^=div]').remove();
    });

    $('.elements').on('click', '.open-close', function() {
        var hideShowN = $(this).closest('div[id^=div]').attr('id').replace(/\D/g,'');
        $('#hide_show_'+hideShowN).toggle();
    });

    $('.add').on('click', function() {
        $('.elements').append('<div id="div_8">Element<a class="open-close" href="#" title="Open/Close">Open/Close</a><div id="hide_show_8" style="display: none;">Stuff</div><a class="remove" href="#" title="Remove">Remove</a></div>');
    });

});​

- Giona

---

我认为closest比parents更简洁。 - James Montagne

这是一个有效的评论，但不是解决 OP 问题的答案。 - Adriano Carneiro

没错，这就是为什么我说更简洁。两种方法都可以，但如果你只需要一个匹配项，就没有必要继续在DOM中查找其他匹配项了。最终只是一个微小的差别。 - James Montagne

@GionaF - 我很感激您提供更整洁的代码，一旦这个问题解决了，我可能会使用它，但是在您进行更改后，我的隐藏/显示区域仍然无法正常工作。 - shimmoril

@shimmoril，你的隐藏/显示区域是什么？能否请你制作一个fiddle？ - Giona

Answer 2

我建议您在使用jQuery时使用监听器，这样更清洁，而且通常更容易。

我已经用我认为您需要的内容制作了一个jsfiddle。请在此处查看：http://jsfiddle.net/YbfZG/2/。

在这个例子中重要的是，删除元素的监听器是在“elements”div上监听的，而不是在删除按钮上。当监听器被触发时，它会检查点击是否在“.element .remove”内，如果是，则执行该函数。

这很重要，因为如果您直接将监听器放在“.element .remove”上，那么对于通过“add”按钮添加的新类，它将失败，因为它们是在jQuery附加监听器之后添加的。

- gitaarik

---

换句话说，将点击事件委托给祖先元素，并检查它来自哪个后代。 - aziz punjani

没错，当在动态创建的元素上使用监听器时，这非常重要。 - gitaarik

我很感谢你的尝试，但由于你添加了新元素，它与我的问题并不完全相同。 - shimmoril

如果您对隐藏/显示功能使用类似这样的监听器，我认为您的问题应该会得到解决。 - gitaarik

Answer 3

我以前遇到过类似的问题。我相信它是由同样的原因引起的。问题在于当你移除/重新添加div时，需要重新绑定点击处理程序。我的做法是创建一个绑定处理程序的函数，并在出现此类情况（即DOM中添加/删除元素）时调用它。

祝好运

- OneChillDude

Answer 4

使用 .detach 代替 remove 来保留事件绑定。引用自文档。

.detach() 方法与 .remove() 相同，唯一不同之处在于 .detach() 会保留所有与删除元素相关联的 jQuery 数据。当需要稍后将已删除元素重新插入到 DOM 中时，此方法非常有用。

- aziz punjani

---

应该注意，这将需要保留对元素的引用，以便重新添加相同的元素。如果元素被重新创建，则无法使用此方法。不幸的是，由于问题中没有包含此代码，我们无法确定。 - James Montagne

正如之前所述，我尝试了detach，但它并没有起作用。另外，考虑到这个项目的要求，我不想管理成千上万个添加和删除的div。感谢您的帮助。 - shimmoril