Remove the elements and contents before an element

Question

Hello guys I am trying to remove the elements and contents before a link inside a div when a user clicks a button. What is the best way to do it??

<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>  

My Jquery

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

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

});

Thanks for the reply...

Answer 1

Just wrap all those elements in a div and remove them

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

or do it a little more friendlier

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

Answer 2

try putting the content you want removed in its own div. Then it will be simple jquery to hide/remove the div on the click event.

Answer 3

You could do this:

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

This just removes all children using .remove() without the close class on them. Or just clone and re-add the link using .clone(), like this:

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

Answer 4

Do you really want to keep that a link, or do you just want that div to contain a link that looks just like it afterwards?

Why not just overwrite innerHTML with <a href="#" class="close">Close it</a>?

I understand that if that link has changed in some way beyond your knowledge or control, then you'd have to keep it, but unless that is the case, a lookalike will do the trick.