Remove all children in jQuery

It’s a very frequent task to remove all the children from HTML node. I’ve been confused recently and the reason is a jQuery function empty(). I haven’t used it before! And it’s because I haven’t known about it yet) All I do to remove all the children from the element is callinga method .html("") passing an empty string as an argument. But there’s a more elegant way! Yes, it’s by using .empty() method!

1
2
3
4
5
6
7
  <div id="test">
    <h1>Header</h1>
    <div class="content">
      <p>Lorem ipsum dolor sit amet.</p>
      <div class="meta">21.01.2013 12:17</div>
    </div>
  </div>
1
2
  // remove all the contents of the #test div
  $("#test").empty();