Home > Article > Web Front-end > Example analysis of remove() method usage in jQuery

Example analysis of remove() method usage in jQuery

巴扎黑Original: 2017-06-25 09:49:311157browse

This article mainly introduces the usage of remove() method in jQuery, and demonstrates the use skills of remove() method to delete elements in three different examples. It has It has certain reference value. Friends who need it can refer to it

The example in this article describes the usage of the remove() method in jQuery. Share it with everyone for your reference. The specific analysis is as follows:

This method will delete all matching elements from the DOM.

Note:The remove() method does not delete the matching elements from the jQuery object, so these matching elements can be used again in the future, but except for the element itself, it is retained , others such as bound events, additional data, etc. will be removed.

Grammar structure:

The code is as follows:

$(selector).remove(expr)

Parameter list:

Parameter	Description
expr	Optional. jQueryexpression for filtering elements

##Example code:

Example one:

The code is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>remove()
函数
-脚本之家</title>
<script type="text/
javascript
" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(
document
).ready(function(){
  $("button").click(function(){
    $("p").remove("#first");
  })
})
</script> 
</head>
<body>
<p id="first">我是第一</p>
<p id="second">我是第二</p>
<button>点击</button>
</body>
</html>

The following code can delete p whose id is first in the p collection.

Example 2:

The code is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>remove()函数-脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("#btd").click(function(){
    $("p").remove();
  })
})
</script> 
</head>
<body>
<p id="first">我是第一</p>
<p id="second">我是第二</p>
<button id="btd">点击删除第一个p</button>
</body>
</html>

If the parameters are omitted, all matching elements will be deleted.

Example 3:

The code is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>remove()函数-脚本之家</title>
<style type="text/css">
p{
  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=$("p");
    a.remove("#first");
    $("#btn").click(function(){
      alert(a.length);
    })
  })
})
</script> 
</head>
<body>
<p id="first">我是第一</p>
<p id="second">我是第二</p>
<button id="btd">删除第一个p</button><button id="btn">查看删除操作后p的数量</button>
</body>
</html>

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

The above is the detailed content of Example analysis of remove() method usage in jQuery. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Analyze the difference between remove() and detach() functions in jqueryNext article：Analyze the difference between remove() and detach() functions in jquery

See more

Example analysis of remove() method usage in jQuery

Related articles