Example of remove of method usage in jQuery

  • 2020-05-09 18:07:24
  • OfStack

This article illustrates the use of the remove() method in jQuery as an example. Share with you for your reference. The specific analysis is as follows:

This method removes all matched elements from DOM.

Note: the remove() method does not remove the matched elements from the jQuery object, so they can be used again in the future, but in addition to the element itself being retained, other things such as bound events, additional data, etc. will be removed.

Grammatical structure:

$(selector).remove(expr)

Parameter list:

参数 描述
expr 可选。用于筛选元素的jQuery表达式
Example code:

Example 1:


<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//www.ofstack.com/" />
<title>remove() function - The home of the script </title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div").remove("#first");
  })
})
</script>
</head>
<body>
<div id="first"> I am the first 1</div>
<div id="second"> I am the first 2</div>
<button> Click on the </button>
</body>
</html>

The following code can remove div with id being first from the div collection.

Example 2:


<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//www.ofstack.com/" />
<title>remove() function - The home of the script </title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#btd").click(function(){
    $("div").remove();
  })
})
</script>
</head>
<body>
<div id="first"> I am the first 1</div>
<div id="second"> I am the first 2</div>
<button id="btd"> Click delete first 1 a div</button>
</body>
</html>

If you omit the parameter, you are removing all matched elements.

Example 3:


<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//www.ofstack.com/" />
<title>remove() function - The home of the script </title>
<style type="text/css">
div{
  width:200px;
  height:200px;
  border:5px solid green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#btd").click(function(){
    var a=$("div");
    a.remove("#first");
    $("#btn").click(function(){
      alert(a.length);
    })
  })
})
</script>
</head>
<body>
<div id="first"> I am the first 1</div>
<div id="second"> I am the first 2</div>
<button id="btd"> Delete the first 1 a div</button><button id="btn"> After viewing the delete operation div The number of </button>
</body>
</html>

remove() has removed the matching element from DOM, but it has not been removed from the jquery object.

I hope this article has been helpful to your jQuery programming.


Related articles: