javascript - 如何使用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();
});

Answer 1

您需要在删除链接代码上使用事件委托(delegate):

$('.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 example

此外，您没有添加完整的 div block 来匹配您拥有的其他代码。你遗漏了 <div class="block">并且只添加了输入和跨度。