What is the use of jquery to remove dom elements?-Front-end Q&A-php.cn

Home

Web Front-end

Front-end Q&A

What is the use of jquery to remove dom elements?

青灯夜游

Mar 23, 2022 pm 06:25 PM

jquery

jquery uses: 1. The remove() method can delete the specified dom element and all its contents; 2. The detach() method can remove the specified dom element and all its contents. Delete, but the bound event will not be deleted; 3. The empty() method can remove the specified descendant dom element.

What is the use of jquery to remove dom elements?

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

In jQuery, if we want to delete dom elements, we have the following three methods: remove(), detach() and empty().

1. remove() method

The remove( ) method can delete an element and all its contents.

$(selector).remove()

Example:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
	$(function () {
            $("#btn").click(function () {
                $("li:nth-child(4)").remove();
            })
        })
    </script>
	</head>
	<body>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
			<li>jQuery</li>
			<li>Vue.js</li>
		</ul>
		<input id="btn" type="button" value="删除" />
	</body>
</html>

$("li:nth-child(4)").remove() means removing the 4th one under the ul element li element. Remember, in jQuery, except for the two selectors: nth-child() and :nth-of-type(), the subscripts of all other selectors or jQuery methods start from 1. 0 started.

What is the use of jquery to remove dom elements?

2. detach() method

In jQuery, although the functions of detach() and remove() are similar, both It deletes an element and all its contents, but there are obvious differences between the two.

The remove() method is used to "completely" remove elements. The so-called "complete" means that not only the element will be deleted, but also the events bound to the element will be deleted; the
detach() method is used to "semi-completely" delete the element. The so-called "semi-complete" means that only elements will be deleted, but events bound to the elements will not be deleted.

$(selector).detach()

Example:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
	$(function () {
            $("li").click(function () {
                alert("欢迎来到PHP中文网！")
            });
            $("#btn").click(function () {
                var $li = $("li:nth-child(4)").detach();
                $($li).appendTo("ul");
            });
        })
    </script>
	</head>
	<body>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
			<li>jQuery</li>
			<li>Vue.js</li>
		</ul>
		<input id="btn" type="button" value="删除" />
	</body>
</html>

In this example, we add a click event for each li element. Clicking any li element will pop up a dialog frame. After we click the [Delete] button, the item

jQuery

will be added to the end of the ul element.

What is the use of jquery to remove dom elements?

##But at this time, if you click the

jQuery

item again, you will find that the previously bound click event exists, and a dialog box will pop up. .

What is the use of jquery to remove dom elements?

3. empty() method

In jQuery, we can use the empty() method to "empty "Some descendant element.

$(selector).empty()

Example:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(function () {
            $("#btn").click(function () {
                $("ul li:nth-child(4)").empty();
            });
        })
    </script>
	</head>
	<body>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
			<li>jQuery</li>
			<li>Vue.js</li>
		</ul>
		<input id="btn" type="button" value="删除" />
	</body>
</html>

What is the use of jquery to remove dom elements?

[Recommended learning:

jQuery video tutorial, web front-end 】

The above is the detailed content of What is the use of jquery to remove dom elements?. 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