web-dev-qa-db-ja.com

JavaScriptで動的に追加された要素を削除する方法

いくつかの要素を作成する次のコードがあります

<div id="parent">
    <div id="block_1" >
        <div>
          <input type="text">
        </div>
        <img src="arrow.jpg">
        <div>
          <input type="text">
        </div>
        <div><a href="#" class="remove_block">Remove</a></div>
    </div>
</div>

結果はこのようになります enter image description here

ユーザーが[追加]ボタンを押すと、JavaScript関数に移動し、divの同じブロックを作成します。これがコードです

function add_block() {
var curDiv = $('#parent');
var i = $('#parent div').size()/4 + 1;
var newDiv='<div id="block_'+ i + '" class="parent_div">' +
'<div>' +
'<input type="text">' +
'</div>' +
'<img src="arrow.jpg">' +
'<div>' +
'<input type="text">' +
'</div><div><a class="remove_block" href="#">Remove</a></div>' +
'</div>';
$(newDiv).appendTo(curDiv);
};

ユーザーがブロックの左側にある[削除]リンクを押すたびに、対応するブロックを削除する必要があります。そして、これは私がやったことです：

$('a.remove_block').on('click',function(events){
   $(this).parents('div').eq(1).remove();
});

問題は、元のブロックでの削除のみが機能し、残りは機能しなかったことです。なぜ誰か知っていますか？ enter image description here

私はjQueryとJavaScriptを初めて使用するので、どんなヘルプや提案にも本当に感謝しています。注：私はjQuery 2.0.3を使用しています。

javascriptjqueryhtmljavascript-events
17
Nexus

これは動的コンテンツであるため、静的コンテンツのようにイベントをバインドすることはできません。バインド時に表示されないため、要素にバインドされません。

したがって、次のようにイベントをバインドする必要があります。

$('#parent').on('click', 'a.remove_block', function(events){
   $(this).parents('div').eq(1).remove();
});
27
Chokchai

動的に追加された要素には、イベントの委任を使用する必要があります。 .on()を使用した場合でも、使用される構文ではイベントの委任は使用されません。

通常のイベントを登録すると、その時点でdomに存在する要素のみにハンドラーが追加されますが、イベントの委任を使用すると、実行時に存在する要素にハンドラーが登録され、渡されたセレクターが評価されますイベントが要素までバブリングされたとき

$(document).on('click', '.remove_block', function(events){
   $(this).parents('div').eq(1).remove();
});
3
Arun P Johny

削除する動的要素がイベントリスナーの子孫ではない状況がありました。

siteSel.on('select2:select', function (e) {
      // remove some other dynamic element on page.
});

私が見つけたソリューションはwhen（）メソッドを使用していた。

siteSel.on('select2:select', function (e) {
      let dynamicElement = $('.element');
      $.when(dynamicElement).then(dynamicElement.remove());
});
0
Rmy5
$('a.remove_block').on('click',function(events){
  $(this).parents('.parent_div').remove();
  return false;
});
0
Adrian