jQuery API

.remove()

Categories: Manipulation > DOM Removal

.remove( [ selector ] ) Returns: jQuery

Description: Remove the set of matched elements from the DOM.

  • version added: 1.0.remove( [ selector ] )

    selectorA selector expression that filters the set of matched elements to be removed.

Similar to .empty(), the .remove() method takes elements out of the DOM. We use .remove() when we want to remove the element itself, as well as everything inside it. In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed.

Consider the following HTML:

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

We can target any element for removal:

$('.hello').remove();

This will result in a DOM structure with the <div> element deleted:

<div class="container">
  <div class="goodbye">Goodbye</div>
</div>

If we had any number of nested elements inside <div class="hello">, they would be removed, too. Other jQuery constructs such as data or event handlers are erased as well.

We can also include a selector as an optional parameter. For example, we could rewrite the previous DOM removal code as follows:

$('div').remove('.hello');

This would result in the same DOM structure:

<div class="container">
  <div class="goodbye">Goodbye</div>
</div>

Examples:

Example: Removes all paragraphs from the DOM 

<!DOCTYPE html>
<html>
<head>
  <style>p { background:yellow; margin:6px 0; }</style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
	<p>Hello</p> 
  how are 
  <p>you?</p>
  <button>Call remove() on paragraphs</button>
<script>
    $("button").click(function () {
      $("p").remove();
    });

</script>

</body>
</html>

Demo:

Example: Removes all paragraphs that contain "Hello" from the DOM 

<!DOCTYPE html>
<html>
<head>
  <style>p { background:yellow; margin:6px 0; }</style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
	<p class="hello">Hello</p>
  how are 
  <p>you?</p>

  <button>Call remove(":contains('Hello')") on paragraphs</button>
<script>

    $("button").click(function () {
      $("p").remove(":contains('Hello')");
    });

</script>

</body>
</html>

Demo:

Comments

  • Support requests, bug reports, and off-topic comments will be deleted without warning.

  • Please do post corrections or additional examples for .remove() below. We aim to quickly move corrections into the documentation.
  • If you need help, post at the forums or in the #jquery IRC channel.
  • Report bugs on the bug tracker or the jQuery Forum.
  • Discussions about the API specifically should be addressed in the Developing jQuery Core forum.
  • To remove an item from a SELECT list.

    $("select#mySelect option[value='option1']").remove();
  • Guest
    Continuing with that thought, to remove the selected items from a SELECT list,

    $("select#mySelect option[selected='true']").remove();
  • Thank you. That is *exactly* what I was googling to find. Kudos.
  • coreyward
    If you've got a container with a lot of child elements you had better empty the container element before removing it. Due to the way jQuery handles remove vs empty, empty is thousands of times faster, at least in this situation.

    So do this:

    $('#container').empty().remove();

    …instead of this:

    $('#container').remove();
  • Lbvf50
    I've made an experiment with container which has 66300 children, and it shows .empty().remove() is 2% slower then simply remove().

    I did not see thousand of time faster, in general bot ways spend the same time:
    empty().remove(): 1877 ms
    .remove: 1833 ms.

    P.S. I've created container div with 300 groups of P and 10 green divs. Where are in each green div located 10 white divs with p. i.e. 3000 green divs, 3000 white divs.

    To render this page my CPU spend 10 seconds with 96% of usage. CPU Celeron 1.60GHZ, RAM 1GB, System XP, browser FF 3.6.3. profile with firebug.
  • coreyward
    Do any of them have content? The situation I was using was in a social website feed. There were about 50 items in the feed, each containing dozens of nodes of varying types with a fair bit of content and CSS styles applied to them. When we would try to remove a single feed item with .remove() it was pretty slow. Using .empty().remove() it was extremely fast.

    I'd really be interested in seeing what specifically caused this. I might dive into the jQuery code in a bit and see if I can't figure it out.
  • Lbvf50
    Hi. Here is the script I've used for testing http://dima.awardspace.biz/rezak/jquery_remove.

    If You want I can send you html file with div-container which has 66300 elements (the size of this file is 3.6 Mb)... and for removing container div in this file FireFox spends 1.8 seconds, this time dose not depends of the way you doing it.
  • Lbvf50
    Uuups. I was looking at wrong column of profiler. Both ways spend fey ten one millisecond to remove container. So there is no actual difference, beside more time typing empty().
  • Lbvf50
    Second Ups, I was right at the first message. Sorry...
  • I agree with coreyward above. Using empty() before remove() is much faster and safer. I am using the Thickbox plugin and had to display a table with around 7000 rows with 8 columns on each row , trying to close the overlay crashed the page in Chrome(5.0.375.86 beta) and was extremely slow in Firefox(3.6.3). I was able to solve this by using empty() before remove() in the bit of code that was causing the issue.
Time to generate: 2.28148