Question

我正在制作一个场景，用户可以通过点击“添加”按钮添加一个带有“删除”选项的新行。如果他们单击“删除”按钮，整个行将被删除。我已经为它编了脚本。但是，它并没有完美运作。请注意我的小提琴：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

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

$('.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块以匹配您拥有的其他代码。您遗漏了<div class="block">，只添加了输入和范围。

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

Answer 3

试试这个：

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

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

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

如何使用jquery添加和删除div

4 个答案: