webentwicklung-frage-antwort-db.com.de

So entfernen Sie ein Element, das dynamisch in Javascript hinzugefügt wird

Ich habe den folgenden Code, um ein Element zu erstellen

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

das Ergebnis sieht so aus enter image description here

Wenn der Benutzer den ADD-Button drückt, wird eine Javascript-Funktion aufgerufen und derselbe Block von div erstellt. Hier ist der Code 

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

wenn der Benutzer auf der linken Seite des Blocks den Link "Entfernen" drückt, sollte der entsprechende Block entfernt werden. Und das habe ich getan:

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

Das Problem ist, dass nur das Entfernen im ursprünglichen Block funktioniert, der Rest nicht. Weiß jemand warum? enter image description here

Ich bin neu bei jQuery und Javascript, daher freue ich mich über jede Hilfe und jeden Vorschlag Hinweis: Ich verwende jQuery 2.0.3

15
Nexus

Da es sich um dynamische Inhalte handelt, können Sie Ereignisse wie statische Inhalte nicht binden. Sie werden nicht an die Elemente gebunden, da sie zum Zeitpunkt der Bindung nicht angezeigt werden.

Also solltest du das Event so binden:

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

Sie müssen die Ereignisdelegation für dynamisch hinzugefügte Elemente verwenden. Obwohl Sie .on() verwendet haben, verwendet die verwendete Syntax keine Ereignisdelegation.

Wenn Sie ein normales Ereignis registrieren, wird der Handler nur den Elementen hinzugefügt, die zu diesem Zeitpunkt im dom vorhanden sind. Wenn jedoch Ereignisdelegation verwendet wird, wird der Handler bei einem Element registriert, das zum Zeitpunkt der Ausführung vorhanden ist, und der übergebene Selektor wird ausgewertet wenn das Ereignis zu dem Element gesprudelt wird

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

Ich hatte die Situation, dass das zu entfernende dynamische Element kein Nachkomme meines Ereignis-Listeners war: 

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

Die Lösung, die ich gefunden habe, verwendete die Methode 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