So entfernen Sie Elemente mithilfe von jQuery()

Question

Ich versuche, ein Element hinzuzufügen, wenn ein Kontrollkästchen aktiviert ist, und entfernen Sie das gleiche Element, wenn ein Benutzer das Kontrollkästchen deaktiviert.

Hier ist mein Code:

$(document).ready(function() { 

     var increment = 0; 
     var artist_to_compare = new Set(); 

     $(document).on("change", ".checkbox", function() { 
      increment += this.checked ? 1 : -1; 

      if (!this.checked) { 

       // // delete the artist from the list of comparison 
       $(element_to_delete).remove(); 
       artist_to_compare.delete(this.name); 
       var element_to_delete = "." + this.name; 
       console.log(element_to_delete); 

      } else { 

       // Add the artist to the list of comparison 
       artist_to_compare.add(this.name); 
       var element_to_add = '<p class="' + this.name + '">' + this.name + '</p>'; 
       console.log(element_to_add); 
       $(".artistToCompare").after(element_to_add); 

      } 

      if (increment >= 2) { 
       console.log(artist_to_compare); 
       // enable the compare button 

      } 
     }); 
    }); 

ich in der Lage bin, richtig das Element hinzufügen, aber ich kann es nicht entfernen. Bitte helfen Sie!

Answer 1

Sie $(element_to_delete).remove(); geschrieben haben, bevor element_to_delete

artist_to_compare.delete(this.name); 
    var element_to_delete = "." + this.name; 
    console.log(element_to_delete); 
$(element_to_delete).remove(); 

Answer 2

Ja Rahul definiert, ist richtig. Sie verwenden remove() Funktion, um element_to_delete zu löschen, bevor Sie es definieren. Kasse folgenden Code.

$(document).ready(function() { 

    var increment = 0; 
    var artist_to_compare = new Set(); 

    $(document).on("change", ".checkbox", function() { 
     increment += this.checked ? 1 : -1; 

     if (!this.checked) { 

      // delete the artist from the list of comparison 
      var element_to_delete = "." + this.name; 
      console.log(element_to_delete); 
      $(element_to_delete).remove(); 
      artist_to_compare.delete(this.name); 

     } else { 

      // Add the artist to the list of comparison 
      artist_to_compare.add(this.name); 
      var element_to_add = '<p class="' + this.name + '">' + this.name + '</p>'; 
      console.log(element_to_add); 
      $(".artistToCompare").after(element_to_add); 

     } 

     if (increment >= 2) { 
      console.log(artist_to_compare); 
      // enable the compare button 

     } 
    }); 
});