1

作为一个 jQuery 新手，我偶然发现了以下问题：

我有一个将字段集附加到现有表单的按钮。工作正常。每个字段集还有一个按钮，最终用于再次删除该确切字段。出于测试目的，我绑定了一个简单的 console.log 来单击任何删除按钮。

当我单击其中一个删除按钮时，文本会记录在控制台中。但是，它只会在所有先前附加的字段集从文档中完全消失之前闪烁一会。

这是html

<form id="theform" class="form-inline">
    <fieldset class="aField" id="field1">
        <select id="products">
          <option>Item 1</option>
          <option>Item 2</option>
          <option>Item 3</option>
        </select>
      <input type="text" placeholder="Amount" class="amount">
      <input type="text" placeholder="Price">
    </fieldset>
</form>
<button id="addtoform" class="btn test">New Product</button>

这是js：

$(document).ready(function () {

$('#addtoform').click(function() {
    var fields = $('.aField').length;
    var newField  = 'field' + String(fields + 1);
    var button = "<button class='btn btn-danger delete'>delete</button>";
    var newElem = $('#field1').clone().attr('id', newField).append(button); 

    $('#theform').append(newElem);
});

$("#theform").on("click", '.btn.btn-danger.delete', function () {
    console.log('ok, let me delete this.');
});

});

怎么了？

4

4 回答 4

1

使用它：您将使其正常工作，并且可以从表单中删除其余控件。

$("#theform").on("click", '.btn.btn-danger.delete', function (e) {
    e.preventDefault();
    $(this).parent().remove(); // Delete appended element
    console.log('Element Deleted..');
});

小提琴演示

于 2013-07-18T16:09:18.377 回答
0

这将$("#theform .btn.btn-danger.delete')选择所有按钮。您必须选择要删除的按钮。

或者更简单的是：

$(".btn.btn-danger.delete").click(function(){
     $(this).remove();
});
于 2013-07-18T16:10:16.580 回答
0

尝试这个

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

如果您的删除按钮是您的字段集的子项，则应该只删除父字段集。

于 2013-07-18T16:11:05.073 回答
0

静态声明的字段集是否也被删除？

于 2013-07-18T16:18:42.087 回答