Question

作为一个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.');
});

}）;

发生了什么事？

Answer 1

使用此选项：您将使用它，您可以从表单中删除其余控件。

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

Fiddle Demo

Answer 2

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

甚至更容易：

$(".btn.btn-danger.delete").click(function(){
     $(this).remove();
});

Answer 3

试试这个

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

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

Answer 4

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

jquery附加元素在单击后意外消失

4 个答案: