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

This article mainly explains "how jquery removes dom elements". The content in the article is simple and clear, easy to learn and understand. Please follow the editor's ideas to study and learn "how jquery removes dom elements".

Jquery removes the dom element with: 1, remove () method, you can delete the specified dom element and all its internal contents; 2, detach () method, you can delete the specified dom element and all its internal contents, but will not delete bound events; 3, empty () method, you can remove the specified descendant dom element.

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

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

1. Remove () method

The remove () method deletes an element and everything inside it.

(selector) .remove ()

Example:

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

$("li:nth-child (4)") .remove () deletes the fourth li element under the ul element. Remember, in jQuery, except for: nth-child () and: nth-of-type (), the subscript of all selectors or jQuery methods starts at 0.

2. 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.

(selector) .detach ()

Example:

$(function () {$("li") .click (function () {alert ("Welcome!") ); $("# btn") .click (function () {var $li = $("li:nth-child (4)") .detach (); $($li) .appendto ("ul");}) }) HTML CSS JavaScript jQuery Vue.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 exists and the dialog box will pop up.

3. Empty () method

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

(selector) .empty ()

Example:

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

Thank you for reading, the above is the content of "how jquery removes dom elements". After the study of this article, I believe you have a deeper understanding of how jquery removes dom elements, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.