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.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.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.
  • I can't get fade then remove to work either of the suggested ways with jquery current
  • casben79
    Try this :
    $("#someElement").fadeOut(500, function(){
    $("#someElement").remove();
    });
  • natetallman
    Fading out THEN removing doesn't seem to work.
    I'm trying something like this:
    $("#someElement").fadeOut(
    function(){
    $("#someElement").remove();
    }
    );

    Any suggestions? (BTW, I'm on 1.3.2)