Добавить/удалить родительский div в другой div, нажав кнопку

Question

Я хочу, чтобы родительский div «.card» кнопки добавлялся к синему div при нажатии кнопки, а также мог «возвращаться» к оригиналу красный div, снова нажав кнопку. 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 атрибуты должны быть уникальным в пределах одного документа, так что вы должны удалить id свойства из input элементов в .card (или делают их уникальными). Во-вторых, ваш пример скрипта не включал jQuery.

Чтобы исправить вашу актуальную проблему, вы можете получить родителя .card с input с использованием closest(). Затем вы можете append() это до требуемого div, проверяя, какой из них в настоящее время содержится в, что-то вроде этого:

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

Updated fiddle

Обратите внимание, что вам не нужно звонить detach() вообще как элемент просто перемещается в DOM. Также обратите внимание, что гораздо лучше использовать ненавязчивый javascript для прикрепления обработчиков событий вместо неуклюжих и устаревших атрибутов событий on*. Поскольку вы уже включили код jQuery, я использовал это для достижения этого.