How to delete html tags in jquery-JS Tutorial-php.cn

How to delete html tags in jquery

青灯夜游

Release： 2021-10-29 18:20:19

Original

4882 people have browsed it

Deletion method: 1. Use the remove() method, the syntax "$(selector).remove()"; 2. Use the detach() method, the syntax "$(selector).detach()"; 3 , use empty() method, syntax "$(selector).empty()".

How to delete html tags in jquery

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

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

remove() method

In jQuery, we can use the remove() method to delete an element and all the content inside it.

Syntax: $(selector).remove()

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.7.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>

Copy after login

How to delete html tags in jquery

detach( ) method

In jQuery, although the functions of detach() and remove() are similar, they both delete an element and all its contents, but they also have obvious differences. the difference.

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.

Syntax: $(selector).detach()

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("p").detach();
});
});
</script>
</head>

<body>
<p>这是一个p元素段落</p>
<button>删除 p 元素</button>
</body>
</html>

Copy after login

How to delete html tags in jquery

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.7.2.min.js"></script>
<script>
$(function () {
            $("li").click(function () {
                alert("欢迎来到php中文网！")
            });
            $("#btn").click(function () {
                var $li = $("li:nth-child(4)").remove();
                $($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>

Copy after login

How to delete html tags in jquery

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

jQuery

will be added to the end of the ul element. But at this time, if you click the

jQuery

item again, you will find that the previously bound click event has been deleted and the dialog box will not pop up.

When we replace remove() with detach(), we can find that when the li element is deleted and then re-added, the click event previously bound to the element still exists. For the two methods remove() and detach(), it can be summarized as this: the element is deleted and then added again. If you do not want the element to retain the original bound event, you should use the remove() method; if you want the element to retain its original bound events, Elements retain their originally bound events and should use the detach() method.

empty( ) method

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

Syntax: $(selector).empty()

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.7.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>

Copy after login

How to delete html tags in jquery

Related Recommended video tutorial: jQuery Tutorial (Video)

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