jQuery Append und Remove

Ich versuche, mit diesem jQuery append einige HTML und dann unappend es

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

Wie bin ich in der Lage, dies zu tun und auch live update ? Ich bin nur versuchen, fügen Sie dieses element, wenn ein Benutzer "Klicks" oder "off" ?

d.h. wenn der check nicht die Klasse "Selected" - Anhängen - sonst entfernen ?

könnten Sie ein paar html zu?

InformationsquelleAutor Tom | 2010-11-18

  1. 5

    Da Ihre Frage war ziemlich vage, und es fehlte markup habe ich eine basic-checkbox-Beispiel für die demo. Ich habe einen link zu einer live-demo auf jsFiddle hier

    HTML:

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

    InformationsquelleAutor Kieran

  2. 1

    Ich glaube, dass ein sinnvoller Ansatz sein könnte, um zu speichern die Ergebnisse der einzelnen Anhängen in ein array oder eine variable und Schleife durch, dass, wenn Sie entfernen Sie die Elemente. Für ein einzelnes element, 

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

//Removing
ele.remove();

    Wenn Sie dies tun, aus einem event-handler, der die variable ele definiert werden sollte, in der außerhalb des Bereichs, so dass es zugänglich ist, danach. Für mehrere Objekte: 

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

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

    Wieder, das array ele sollte definiert werden, außerhalb des Anwendungsbereichs der jeder event-Handler. Ansonsten, die anderen Antworten auf diese Frage wird auch funktionieren.

    InformationsquelleAutor Yi Jiang

  3. 0
    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');
    }
});

    InformationsquelleAutor aefxx

  4. 0

    Denke ich, dass Sie nicht brauchen, um add-span-tag gibt.
    dann kann der code kurz sein wie dieser.

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

    InformationsquelleAutor Jinbom Heo

Schreibe einen Kommentar