jQuery remove()

The jQuery remove() method is used to remove the selected elements out of the DOM. It removes the selected element itself, as well as everything inside it (including all texts and child nodes). This method also removes the data and the events of the selected elements.

If you want to remove elements without removing data and events, you should use the detach() method. If you want to remove only data and events, use the empty() method.

Syntax:

Parameters of jQuery remove() method:

Parameter	Description
Selector	is an optional parameter. It specifies whether to remove one or more elements. If you have to remove more than one element then you should separate them with comma (,).

Example of jQuery remove() method

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>remove demo</title>
  <style>
  p {
    background: pink;
    margin: 6px 0;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 <p>Hello Guys!</p>
This is javatpoint.com<br/>
<p>A place for all technology.</p>
<button>Execute remove() method on paragraphs</button>
 <script>
$( "button" ).click(function() {
  $( "p" ).remove();
});
</script>
</body>
</html>

Test it Now

jQuery remove() example 2

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").remove();
    });
});
</script>
</head>
<body>
<p>Welcome Guys!</p>
<p><b>This is javatpoint.com</b></p>
<button>Click here to execute remove() method</button>
</body>
</html>

Test it Now

Next TopicjQuery empty()

← prev next →