1

jQuery初心者として、私は次の問題に出くわしています:

フィールドセットを既存のフォームに追加するボタンがあります。正常に動作します。さらに、各フィールドセットには、最終的にその正確なフィールドを再度削除するためのボタンがあります。テスト目的で、単純な console.log をこれらの削除ボタンをクリックするようにバインドしました。

削除ボタンの 1 つをクリックすると、テキストがコンソールに記録されます。ただし、以前に追加されたすべてのフィールドセットがドキュメントから完全に消える前に、一瞬だけ点滅します。

ここに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

静的に宣言されたフィールドセットも削除されていますか?

于 2013-07-18T16:18:42.087 に答える
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 に答える