jQuery remove() Method

Quiz

The remove() method in jQuery is used to remove all the selected elements from the DOM. It removes the elements along with their data and all bound event handlers.

If we want to remove the elements without removing data and events, we need to use the detach() method.

If we want to remove only the content from the selected elements, we need to use the empty() method.

Syntax

Following is the syntax of remove() method in jQuery −

$(selector).remove(expr)

Parameters

This method accepts the following optional parameter −

selector: A selector expression used to filter the set of matched elements to be removed. Only the elements that match this expression will be removed.

Example 1

In the following example, we are using the remove() method to remove all the <div> elements −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $("button").click(function(){
      $("div").remove();
    });
  });
</script>
</head>
<body>
<div>Div element 1.</div>
<div>Div element 2.</div>
<button>Remove all "div" elements</button>
</body>
</html>

All the "div" elements will be removed when we click the button.

Example 2

In this example, we are using the optional parameter of the remove() method to remove the <div> elements with class name "one" −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $("button").click(function(){
      $("div").remove(".one");
    });
  });
</script>
</head>
<body>
<div>Div element 1.</div>
<div>Div element 2.</div>
<div class="one">Div element 3 (with class "one").</div>
<div class="one">Div element 4 (with class "one").</div>
<button>Remove all "div" elements</button>
</body>
</html>

When we click the button, all the <div> elements with class name "one" will be removed.

Example 3

Here, we are using the optional parameter to filter multiple elements to be removed −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $("button").click(function(){
      $("div").remove(".one, .two");
    });
  });
</script>
</head>
<body>
<div>Div element 1.</div>
<div>Div element 2.</div>
<div class="one">Div element 3 (with class "one").</div>
<div class="one">Div element 4 (with class "one").</div>
<div class="two">Div element 5 (with class "two").</div>
<button>Remove all "div" elements</button>
</body>
</html>

When we click the button, it removes all the "div" elements with class name "one" and "two".

jquery_ref_html.htm

Print Page