如何使用jQuery添加和删除div元素

Question

我正在制作一个场景，在该场景中，用户可以通过单击“添加”按钮添加带有“删除”选项的新行。如果他们单击“删除”按钮，则整个行将被删除。我已经为此编写了脚本。但是，它并不完美。请看一下我的fiddle：http://jsfiddle.net/learner73/gS8u2/ 我的问题是：

（1）如果用户单击“添加”按钮，将添加一个新行。这很好。但是，它会出现在“添加”按钮下面。我希望新行将添加到“添加”按钮上面，我的意思是“添加”按钮应始终位于底部。

（2）在我的代码中，如果用户在先前创建的行上单击“删除”按钮，则整个行将被删除。这很好。但是，当他们在动态创建的行上单击“删除”按钮时，什么也不会发生！

HTML:

<div class="optionBox">
    <div class="block">
        <input type="text" /> <span class="remove">Remove Option</span>
    </div>
    <div class="block">
        <input type="text" /> <span class="remove">Remove Option</span>
    </div>
    <div class="block">
        <span class="add">Add Option</span>
    </div>
</div>

jQuery:

$('.add').click(function() {
    $('.optionBox').append('<input type="text" /><span class="remove">Remove Option</span>');
});

$('.remove').click(function() {
    $(this).parent('div').remove();
});

- user1896653

---

在学习过程中，一个重要的技能是学会如何使用Google搜索（并使用它来搜索文档），并获得你需要的结果。我并不是说这话是为了挖苦你，而是真诚地给出建议。在这种情况下，通过在Google搜索中输入“insert”和“before”，再加上“jQuery”，就可以得到数百个解决你直接问题的方案。每当你遇到困难时，停下来，Google一下，尝试一下，然后作为最后的手段再提问。把解决问题的责任放在你自己身上，这样做将有助于你作为开发人员的学习和成长——仅仅在这里提问可能会得到答案，但实际上会让你退步。 - Chris Baker

Answer 1

您需要在删除链接代码上使用事件委托：

$('.add').click(function() {
    $('.block:last').before('<div class="block"><input type="text" /><span class="remove">Remove Option</span></div>');
});
$('.optionBox').on('click','.remove',function() {
    $(this).parent().remove();
});

jsFiddle示例

另外，您没有添加完整的

块以匹配其他代码。您遗漏了

标签，只添加了输入和Span。

- j08691

---

我对remove函数有疑问，如果我们有3-4个以上的父类，那么如何使用remove函数呢？例如：<div class="parent"> <div class="a"><input type="text"><input type="text"><input type="text"></div><div class="remove"><span>Remove</span></div></div> 它只会删除remove按钮。 - user9437856

Answer 2

演示 http://jsfiddle.net/34Lbu/

API: .before https://api.jquery.com/before/

希望这些内容符合您的需求 :)

代码

$('.add').click(function () {
    $(this).before('<div class="block"><input type="text" /><span class="remove">Remove Option</span></div>');
});

$(document).on('click', '.remove', function () {
    $(this).parent('div').remove();
});

编辑 http://jsfiddle.net/amdzakir/gS8u2/38/ 检查所有输入字段是否填写了值。

$('.add').click(function() {
    flag = true;
    $('input').css('border-color','green');
    $('input').each(function(){
        if ($.trim($(this).val())===''){
            $(this).css('border-color','red');
            flag = false;
        }
    });
    if(flag){
    $(this).before('<div class="block"><input type="text" /><span class="remove">Remove Option</span></div>');
    }
});
$(document).on('click','.remove',function() {
    $(this).parent().remove();
});

- Tats_innit

Answer 3

试试这个：

$('.remove').click(function() {
$(this).closest('div').remove();
 });

$('.add').click(function() {
$('.block:last').after('<input type="text" /><span class="remove">Remove    Option</span>');
  });

- Alex Shilman

---

由于没有添加任何 div，所有父 div 都被删除了。 - Jay Blanchard

Answer 4

这里有一种方式 - http://jsfiddle.net/gS8u2/3/

$('.add').click(function () {
    $('.block:last').before(' <div class="block"><input type="text" /><span class="remove">Remove Option</span></div>'); // make sure to add the div too
});

$('body').on('click', '.remove', function () { // use event delegation because you're adding to the DOM
    $(this).parent('.block').remove();
});

- Jay Blanchard