jQuery anhängen und entfernen

Question

Ich versuche, diese jQuery zu verwenden, um einige HTML anhängen und unappend es dann

if(!(jQuery(check).hasClass('selected'))){ 
    jQuery(this).append('<span class="selected">&nbsp;</span>'); 
    }  

Wie bin ich in der Lage, dies zu tun und es auch Live-Update? Ich versuche gerade, dieses Element hinzuzufügen, wenn ein Benutzer auf oder aus klickt?

d. H. Wenn Check die Klasse "Selected" nicht hat - append - else remove?

Answer 1

Da Ihre Frage war irgendwie vage, und es fehlte Markup ich ein grundlegendes Checkbox Beispiel für die Demo verwendet. Ich habe einen Link zu einer Live-Demo auf jsFiddle here

HTML enthalten:

<input type="checkbox" id="test" /> Check me 

<div id="items"></div> 

JavaScript:

$("#test").bind('click', function(){ 

    var $t = $(this); 

    if($t.is(':checked')){ 
    // append item 
    $('#items').append('<span class="selected">I was recently appended.</span>'); 
    }else{ 
    // empty div and remove it from DOM (empty helps with memory leak issues with remove()) 
    $('span', '#items').empty().remove(); 
    } 
}); 

Answer 2

jQuery('#check').click(function() { 
    var check = jQuery(this); 

    if (!check.hasClass('selected')) { 
     jQuery('#mydiv').append('<span class="selected">&nbsp;</span>'); 
     check.addClass('selected'); 
    } else { 
     jQuery('#mydiv span.selected').remove(); 
     check.removeClass('selected'); 
    } 
}); 

Answer 3

Ich denke, dass Sie span-Tag dort nicht hinzufügen müssen. dann kann der Code wie folgt kurz sein.

$("#check").click(function(){ 
    $(this).hasClass('selected') ? $(this).removeClass('selected') : $(this).addClass('selected'); 
}); 

Answer 4

Ich glaube, eine bessere Lösung sein könnte, das Ergebnis zu speichern Hängen Sie jedes an ein Array oder eine Variable an und durchlaufen Sie diese, wenn Sie die Elemente entfernen. Für ein einzelnes Element,

// Appending 
var ele = $('<span>', { 
    html: 'nbsp;', 
    class: 'selected' 
}).appendTo(container); 

// Removing 
ele.remove(); 

Wenn Sie dies aus einem Event-Handler tun, die Variable ele sollte im Außenbereich definiert werden, so dass es danach zugänglich ist. mehrere Artikel für:

// Appending 
var ele = []; 
ele.push($('<span>', { 
    html: 'nbsp;', 
    class: 'selected' 
}).appendTo(container)); 

// Removing 
for(var i = 0; i < ele.length; i++){ 
    ele[i].remove(); 
} 

Wiederum das Array ele sollte außerhalb des Umfangs von Ereignis-Handler definiert werden. Ansonsten funktionieren die anderen Antworten auf diese Frage ebenfalls.