Удалите элементы и содержимое перед элементом

Question

Я пытаюсь удалить элементы и содержимое перед ссылкой внутри div, когда пользователь нажимает кнопку. Каков наилучший способ сделать это?

<div id="dialog" class="window"> 

     //will be inserted a <select> element and few text here 
     //but I want to clear them after the user click a button 

    <a href="#" class="close">Close it</a> // I want to keep this <a> link.  

    </div> 

Мой Jquery

$('.model').click(function(e) { 

    $("#dialog").empty(); //I can't use this because <a> will be deleted. Any better ideas?   

}); 

Спасибо за ответ ...

Answer 1

Просто обернуть все эти элементы в DIV и удалить их

$('#select-wrapper').remove(); 

или сделать его немного более дружелюбный

$('#select-wrapper').fadeOut(500, function() { $(this).remove(); }); 

Answer 2

попробуйте помещать контент, который хотите удалить, в своем собственном div. Тогда будет просто jquery, чтобы скрыть/удалить div на событие click.

Answer 3

Вы можете сделать это:

$('.model').click(function(e) { 
    $("#dialog").children(":not(.close)").remove(); 
}); 

Это просто удаляет все дети, используя .remove() без close класса на них. Или просто клонировать и повторно добавить ссылку с помощью .clone(), как это:

$('.model').click(function(e) { 
    $("#dialog a.close").clone(true).appendTo($("#dialog").empty()); 
}); 

Answer 4

Вы действительно хотите сохранить эту a ссылку, или вы просто хотите, чтобы ДИВ содержать ссылку, которая выглядит так же, как это потом?

Почему бы не просто перезаписать innerHTML с помощью <a href="#" class="close">Close it</a>?

Я понимаю, что если эта ссылка изменилась каким-то образом, кроме ваших знаний или контроля, вам придется ее сохранить, но если это не так, то выглядящий будет делать трюк.