jQueryの追加と私はいくつかのHTMLを追加するために、このjQueryのを使用しようとしています

Question

を外し、

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

どのように私はこれを行うともそれを更新生きることができるのですか？それをunappend私は、ユーザーが「クリック」または「オフ」したときにこの要素を追加しようとしていますか？

つまり、チェックに「選択済み」クラスがない場合--append-else remove？

Answer 1

あなたの質問はあいまいで、マークアップが不十分だったので、私はデモ用の基本的なチェックボックスの例を使用しました。私はより多くのより良いアプローチは、結果を格納するかもしれないと考えてい

$("#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

スパンタグを追加する必要はありません。 その場合、コードはこのように短いことがあります。

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

Answer 4

：JavaScriptの

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

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

：私はjsFiddle でライブデモへのリンクhere

HTMLを含めましたそれぞれが配列または変数に追加され、要素を削除するときにそれをループします。それは後でアクセスできるように、単一の要素については、

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

// Removing 
ele.remove(); 

あなたはイベントハンドラ内からこれをやっている場合は、変数eleは、外側のスコープで定義する必要があります。

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

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

再び、アレイeleは、任意のイベントハンドラの範囲の外で定義されるべきである：複数のアイテムの。そうでなければ、この質問に対する他の答えもうまくいくでしょう。