Home > Web Front-end > Front-end Q&A > How to delete an element object in jquery

How to delete an element object in jquery

WBOY
Release: 2022-06-17 19:39:22
Original
2924 people have browsed it

Jquery method to delete an element object: 1. Use "$(selector)" to obtain the element object of the specified element; 2. Use the remove() method or detach() method to delete the obtained specified element object. Yes, the syntax is "element object.remove()" and "element object.detach()".

How to delete an element object in jquery

The operating environment of this tutorial: windows10 system, jquery3.6.0 version, Dell G3 computer.

How to delete an element object in jquery

1. Get the element object of the specified element

The syntax is:

$(selector)
Copy after login

2. Delete element object

(1) The remove() method removes the selected element, including all text and child nodes.

This method will also remove the data and events of the selected element.

The syntax is:

$(selector).remove()
Copy after login

(2) The detach() method removes the selected elements, including all text and child nodes. It then persists the data and events.

This method keeps a copy of the removed elements, allowing them to be reinserted later.

The syntax is:

$(selector).detach()
Copy after login

The example is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".bt1").click(function(){
$(".p1").remove();
});
$(".bt2").click(function(){
$(".p2").detach();
});
});
</script>
</head>
<body>
<p class="p1">这是一个段落。</p>
<p class="p2">这是另一个段落。</p>
<button class="bt1">remove移除P元素</button>
<button class="bt2">detach移除P元素</button>
</body>
</html>
Copy after login

Output result:

How to delete an element object in jquery

Video tutorial recommendation :jQuery video tutorial

The above is the detailed content of How to delete an element object in jquery. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template