ボタンをクリックして親divを他のdivに追加/削除する

Question

ボタンをクリックすると、ボタンの親div「.card」が青いdivに追加され、元の「div」に戻ることができますもう一度ボタンをクリックすると赤いdivが表示されます。あなたは.card内input要素からidプロパティを削除（またはそれらを一意にする）必要がありますので、 jsfiddle

<div id="nonSelected"> 

    <div class="card"> 
    CARD #1 
    <input id="btnDefault" onclick="moveButton(this)" type="button" class="btn btn-default" value="ADD" /> 
    </div> 

    <div class="card"> 
    CARD #2 
    <input id="btnDefault" onclick="moveButton(this)" type="button" class="btn btn-default" value="ADD" /> 
    </div> 

</div> 

<div id="selected"> 
</div> 


<script> 
function moveButton(elem){ 
    if($(elem).parent().attr("id") == "nonSelected"){ 
     $(elem).detach().appendTo('#selected'); 
    } 
    else{ 
     $(elem).detach().appendTo('#nonSelected'); 
    } 
} 
</script> 

Answer 1

はまずidは、は文書内で一意である必要があります属性。第二に、あなたのフィーリンの例にはjQueryが含まれていませんでした。

実際の問題を解決するには、closest()を使用してinputから親.cardを取得することができます。

$('.card input').click(function() { 
    var $card = $(this).closest('.card') 
    $card.appendTo($card.closest('#nonSelected').length ? '#selected' : '#nonSelected'); 
}); 

Updated fiddle

注意あなたが要素として全くdetach()を呼び出す必要はありません：あなたは、それが現在に含まれる1次のようなものをチェックして、必要なdivからappend()これをすることができますDOM内で単純に移動されます。また、厄介なjavascriptを使用して、厄介で古いイベントの属性の代わりに、イベントハンドラをアタッチする方がはるかに優れていることに注意してください。すでにjQueryコードが含まれていたので、これを実現するために使用しました。