Shulou(Shulou.com)06/02 Report--

This article introduces the knowledge of "how to delete html tags with jquery". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Delete method: 1, use remove () method, syntax "$(selector). Remove ()"; 2, use detach () method, syntax "$(selector). Detach ()"; 3, use empty () method, syntax "$(selector). Empty ()".

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

In jQuery, we have three ways to delete an element: remove (), detach (), and empty ().

Remove () method

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

Syntax: $(selector) .remove ()

Example:

$(function () {$("# btn") .click (function () {$("li:nth-child (4)") .remove ();}) HTML CSS JavaScript jQuery Vue.js

Detach () method

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

The remove () method is used to "completely" delete an element. The so-called "thorough" means that not only the element will be deleted, but also the event bound to the element will be deleted.

The detach () method is used to "semi-thoroughly" delete elements. The so-called "semi-thorough" means that only elements are deleted and events that are bound to elements are not deleted.

Syntax: $(selector) .detach ()

Example:

$(document) .ready (function () {$("button") .click (function () {$("p"). Detach ();})

This is a paragraph of p element.

Delete p element

$(function () {$("li") .click (function () {alert ("Welcome!") ); $("# btn") .click (function () {var $li = $("li:nth-child (4)") .remove (); $($li) .appendto ("ul");});}) HTMLCSSJavaScriptjQueryVue.js

In this example, we add a click event for each li element, and clicking on any li element brings up a dialog box. After we click the delete button, the jQuery item is added to the end of the ul element. But at this time, if you click on jQuery 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 see that when the li element is deleted and then re-added, the click event that was previously bound to that element still exists. For the remove () and detach () methods, it can be summed up as follows: the element is deleted and then re-added, and the remove () method should be used if you do not want the element to retain the event of the original binding; if you want the element to retain the event of the original binding, you should use the detach () method.

Empty () method

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

Syntax: $(selector) .empty ()

Example:

$(function () {$("# btn") .click (function () {$("ul li:nth-child (4)") .empty ();}) HTMLCSSJavaScriptjQueryVue.js

This is the end of "how to remove html tags with jquery". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.