удалить и воссоздать объект jquery

Question

Я создаю этот кусок кода для «отсоединения» и «повторного подключения» к моему товару, но он не работает.

Почему?

$("#ciao").remove(); 


$('#condizionale').on('change', function() { 
    if ($('#velux').is(':selected')) { 
    var el = $('#sel-destination-tour').detach(); 
    }; 
}); 

$('#condizionale').on('change', function() { 
    if ($('#zanzariera').is(':selected')) { 
    $('#sel-destination-tour').append(el); 
    }; 
}); 

Я хочу, чтобы удалить элемент, когда «VELUX» выбран и воссоздать его, когда «zanzariera» выбран.

скрипку: http://jsfiddle.net/dxq3msht/1/

Answer 1

Это потому, что el является локальной переменной первого обработчика события, то есть в вашем втором #condizionale «s изменение обработчика такой переменной не существует, и вы получите ReferenceError. Определите переменную во внешнем контексте.

Другая проблема заключается в использовании $('#sel-destination-tour').append(el) во втором обработчике. После отсоединения запроса возвращается пустой набор, так как отдельный элемент не существует в DOM. Используйте элемент el, а вместо этого - метод .appendTo. Кроме того, добавление элемента к самому элементу не имеет большого смысла. Вы должны (re) добавить элемент в его целевой родительский элемент.

var el; 
$('#condizionale').on('change', function() { 
    if ($('#velux').is(':selected')) { 
    el = $('#sel-destination-tour').detach(); 
    }; 
}); 

$('#condizionale').on('change', function() { 
    if ($('#zanzariera').is(':selected') && el) { 
    el.appendTo('#targetElement'); 
    }; 
}); 

Также обратите внимание, что в этом случае вам не нужно определять 2 обработчика изменений. Вы можете переместить логику второго обработчика в первый обработчик и удалить второй обработчик.

Answer 2

вы можете использовать как этот

$("#ciao").remove(); 
 

 
$('#condizionale').on('change', function() { 
 
    var el; \t //variable declared out side off the both conditions.  
 
    if ($('#velux').is(':selected')) { 
 
    el = $('#sel-destination-tour').detach(); 
 
    }else if($('#zanzariera').is(':selected')){   
 
    $('#sel-destination-tour').append(el); 
 
    };  
 
});