Entfernen Sie HTML-Elemente dynamisch hinzugefügt mit JQuery

Question

In meiner HTML-Seite habe ich eine Auswahl mit einigen Optionen.
Beim Auswählen einer Option wird ein Ajax-Aufruf ausgelöst, der den Wert der Option an ein PHP-Skript weitergibt, das ein HTML-Fragment (ein anderes select) mit einer bestimmten ID zurückgibt, die an die Seite angehängt wird.

Wenn der Benutzer eine andere Option aus der ersten Auswahl wählt, wird das Ereignis wieder gefeuert wird die Ajax-Aufruf ausgeführt und eine andere HTML-Fragment (mit derselben ID) wird an der Seite angehängt.

Ich möchte, dass, wenn das Ereignis ein zweites Mal ausgelöst wird, das angefügte Element aus der Seite vor dem Anhängen der neuen entfernt wird.

Im Moment ist ich mit diesem Code:

$(document).ready(function() { 
    $("#id_serie").change(function() { //#id_serie is the if of the first select 
     if ($("#id_subserie_label")) { //#id_subserie_label is the id of the html element returned by the ajax call 
      console.log("Removing"); 
      $("#id_subserie_label").empty().remove(); 
     } 
     var url = 'myscript.php'; 
     var id_s = $(this).val(); 
     $.post(url, {id_serie: id_s}, function(data) { 
      $("#id_serie").parent().after(data); 
     }); 
    }); 
}); 

Dies allerdings nicht funktioniert, wird das HTML-Element durch den zweiten Ajax-Aufruf zurück angefügt, nachdem das Element aus dem ersten Aufruf zurückgegeben (da das Element mit id #id_subserie_label ist nicht in der Seite, wenn das Skript geladen ist?).

Wie kann ich erreichen, was ich brauche?

Answer 1

Sie sind sehr nah dran.

Ändern Sie einfach if ($("#id_subserie_label"))-if ($("#id_subserie_label").length):

$(document).ready(function() { 
    $("#id_serie").change(function() { 
     if ($("#id_subserie_label").length) { // <=== change this line 
      console.log("Removing"); 
      $("#id_subserie_label").empty().remove(); 
     } 
     var url = 'myscript.php'; 
     var id_s = $(this).val(); 
     $.post(url, {id_serie: id_s}, function(data) { 
      $("#id_serie").parent().after(data); 
     }); 
    }); 
}); 

The jQuery FAQ: How do I test whether an element exists? See.

---

Dies liegt daran, wie Ivo betont:

$("#id_subserie_label") ein Objekt ist, und auf true immer bewerten Objekte.

---

Per Andy E's Kommentar, können Sie Ihren Code dies vereinfachen, wenn Sie die console.log() Anruf nicht brauchen:

$(document).ready(function() { 
    $("#id_serie").change(function() { 
     $("#id_subserie_label").empty().remove(); 
     var url = 'myscript.php'; 
     var id_s = $(this).val(); 
     $.post(url, {id_serie: id_s}, function(data) { 
      $("#id_serie").parent().after(data); 
     }); 
    }); 
});