removing contents of div using Jquery "empty" doesn't work

Question

I'm trying to remove contents of particular div which are basically list items and a heading by using jquery empty so that I could replace with new contents. What happens when I run the code is, the whole div element blinked and flash the replaced content and then the old one reappear. Can anyone tell me what am I doing wrong? Here's an excerpt of my code -

$("#msg_tab").bind("click",function(){
  $("#sidebar1").remove(); 
  var html=".....";
  $("#sidebar1").append(html);
 });



<div id="sidebar1" class="sidebar">
   <ul>
    <li>
     <h2>Messages</h2>
     <ul>
      <li><a href="#">Compose New Message</a></li>
      <li><a href="#">Inbox</a></li>
      <li><a href="#">Outbox</a></li>      
      <li><a href="#">Unread</a></li>
      <li><a href="#">Archive</a></li>
     </ul>
    </li>
   </ul>
  </div>

Another question is, how do I write multiple line html code string in javascript so that java would recognize as a string value? Placing forward slash at the end is ok when the string is not a html code but, in html code, I can't figure out how to escape forward slash from ending tags.I've tried escaping it with backward slash but doesn't work. I would be appreciated if anyone could shed a light on this matter as well.

Answer 1

You're using the wrong function. You want empty():

$("#sidebar1").empty();

remove() will remove the element entirely.

Alternatively you can use html() to replace all the contents.

Your key problem however is you don't stop event propagation. Your link is:

<a id="msg_tab" href="" class="tab msgtab">MESSAGES</a>

No href means if you click on such a link you will navigate back tot he same page. Your event handler should be:

$("#msg_tab").bind("click",function(){
  var html=".....";
  $("#sidebar1").html(html);
  return false;
});

The return false is to stop event propagation, which is currently forcing a page refresh. That's why you're not seeing the update.

Answer 2

U can also use

$("#sidebar1").html("");

to empty the content of any particular div...

Answer 3

You're adding a click handler to a hyperlink that points to your current page.
After the click handler executes, the hyperlink gets clicked and the page reloads, resetting it to its original state.

You need to add return false; to your click handler to prevent the page from reloading.
Alternatively, you could change the href attribute to href="#".