


The **jQuery `remove()` method** is used to remove an element or a group of elements from the #key# DOM: Document Object Model #key#. The contents of the element such as the texts and child elements are also removed. With the jQuery `remove()` method, it is easy to remove an element from the DOM.

# 
## Syntax
```jquery
$([selector]).remove();
```
> Here, the `selector` could either be a `class`, `element` or `id` selector.
## Parameter
The `remove()` method could take an optional parameter. The parameter can be any of the selectors and can be more than one. The parameter helps to select an element with such a selector.

## Example
 
```
$("p").remove(".text-success")
```
The code above will remove any `p` element with the class `.text-success`. If there is more than one parameter, then they should be separated by commas. Doing this will delete any element with one or both of these selectors. 

See the following snippet. 
```
$("p").remove(".text-success, .bg-light");
```

## Code
### Example without parameter
In the example below, we created a button that will remove the `p` together with its contents. This is achieved because `p` has the id `#elToRem`. So when the button is clicked, and since `p` is the element that matches the id selector, `p` along with its contents will be removed.



<!DOCTYPE html>
<html>

<head>
	<title>Jquery prop()</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
	</script>
	<script>
		$(document).ready(function(){
			// add a click event listener to our button
  			$("button").click(function(){
				//   removes element with "#elToRem" as id
    			$("#elToRem").remove();
  			});
		});
	</script>
</head>

<body>
	
	<p id="elToRem">remove me <button>x</button></p>
</body>

</html>

codemirror

### Example with parameter
In the example below, we created a button that when clicked will remove all `li` elements with class `.done`.


<!DOCTYPE html>
<html>

<head>
	<title>Jquery prop()</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
	  span.success{
	    color: green;
	  }
	  span.pending{
	    color:brown;
	  }
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
	</script>
	<script>
		$(document).ready(function(){
			// add a click event listener to our button
  			$("button").click(function(){
				// removes "li" element with class ".done"
    			$("li").remove(".done");
  		})
		})
	</script>
</head>
<body>
  <h3>Todos</h3>
  <ul>
    <li class="done">Code : <span class= "success">DONE</span></li>
    <li class="done">Write Articles: <span class= "success">DONE</span></li>
    <li>Travel Far and Wide <span class= "pending">UNDONE<span></li>
  </ul>
  <button>Clear DONE todos</button>
</body>
</html>

# 
## Example using comma

In this example, we will delete elements that have the classes undone and done using a comma-separated list of parameters.
```
$("li").remove(".done, .notdone");
```

<!DOCTYPE html>
<html>

<head>
	<title>Jquery prop()</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
	  span.success{
	    color: green;
	  }
	  span.pending{
	    color:brown;
	  }
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
	</script>
	<script>
		$(document).ready(function(){
			// add a click event listener to our button
  			$("button").click(function(){
				//   remove "li" elements with ".done" and ".notdone"
    			$("li").remove(".done, .notdone");
  			})
		})
	</script>
</head>
<body>
  <h3>Todos</h3>
  <ul>
    <li class="done">Code : <span class= "success">DONE</span></li>
    <li class="done">Write Articles: <span class= "success">DONE</span></li>
    <li>Travel Far and Wide <span class= "pending">UNDONE<span></li>
  </ul>
  <button>Clear DONE and UNDONE todos</button>
</body>
</html>

# 
## Example using jQuery `:contains()` to delete an element

The `:contains()` selector selects elements that contain the specified string

Here, we will use `:contains()` to match an element that has a partially matching parameter.

> The element we want to remove is the `li` element that contains `"Art"`.


<!DOCTYPE html>
<html>

<head>
	<title>Jquery prop()</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
	  span.success{
	    color: green;
	  }
	  span.pending{
	    color:brown;
	  }
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
	</script>
	<script>
		$(document).ready(function(){
			// add a click event listener to our button
  			$("button").click(function(){
				//   remove "li" element which contains "Art"
    			$("li").remove(":contains('Art')");
  			})
		})
	</script>
</head>
<body>
  <h3>Todos</h3>
  <ul>
    <li class="done">Code : <span class= "success">DONE</span></li>
    <li class="done">Write Articles: <span class= "success">DONE</span></li>
    <li>Travel Far and Wide <span class= "pending">UNDONE<span></li>
  </ul>
  <button>Clear Elemetent with "Art"</button>
</body>
</html>

What is the jQuery remove() method?

Syntax

Parameter

Example

Code

Example without parameter

Example with parameter

Example using comma

Example using jQuery :contains() to delete an element

Example using jQuery `:contains()` to delete an element