Javascript jQuery、DOM和on（）方法

我对jQuery、DOM和on（）方法有问题。这是我的部门：

<div class="box">
  <p class="addBox">Add Box</p>
  <p class="remBox">Remove Box</p>
  <textarea name="box[]"></textarea>
</div>

添加框

拆下盒子

和jQuery代码：

$(document).on("click", ".addBox", function(event){
  $(this).parent().append('<div class="box"><p class="addBox">Add Box</p><p class="remBox">Remove Box</p><textarea name="box[]"></textarea></div>').children(':last').hide().fadeIn(1000);
});

$(document).on("click", ".remBox", function(event){
  $(this).parent().hide(1000).delay(1000, empty());
});

$（文档）。在（“单击”、“.addBox”上，函数（事件）{
$（this）.parent（）.append（'
addBox
Remove Box
）.children（':last'）.hide（）.fadeIn（1000）；
});
$（文档）。在（“单击”、“.remBox”上，函数（事件）{
$（this.parent（）.hide（1000）.delay（1000，empty（））；
});

我试图实现的是一个带有两个按钮的框，其中一个按钮将复制此框，另一个按钮将删除所选框。该框的两个副本在索引文件中“硬编码”，因此从一开始就可以在DOM中使用

---

按钮并没有它们的基本用途，但DOM结构正在变得疯狂。如果我在新创建的框上按“添加框”链接，新框将在我单击的框之后立即显示。然而，有时它会出现在列表的末尾。“del-box”链接也一样，有时只删除一个框，有时删除我想要的一个框，再删除两三个。我做错了什么？谢谢

您可能需要

.after（）

（或

.before（）

），但不需要

.append（）

。您的

.delay（）

语法不正确

$(document).on("click", ".addBox", function (event) {
    $(this).parent().after('<div class="box"><p class="addBox">Add Box</p><p class="remBox">Remove Box</p><textarea name="box[]"></textarea></div>').children(':last').hide().fadeIn(1000);
});
$(document).on("click", ".remBox", function (event) {
    $(this).parent().hide(1000).delay(1000).remove();
});

$（文档）。在（“单击”、“.addBox”上，函数（事件）{
$（this）.parent（）.after（'
addBox
Remove Box
）.children（':last'）.hide（）.fadeIn（1000）；
});
$（文档）。在（“单击”、“.remBox”上，函数（事件）{
$（this.parent（）.hide（1000）.delay（1000）.remove（）；
});

---

有时您看到所有框都被删除的原因是您将新框附加到

.addBox

项的父项，即

框

div——因此您得到的框嵌套在框中，而不是一行一堆

.box

div。如果你改变

$(this).parent().append( ... // removed for clarity

到

您不会得到不正确的嵌套，并且您的框将只正确地移除它们自己

$('body').append( ... // the rest of your code