Shulou(Shulou.com)05/31 Report--

This article mainly explains "how jquery deletes child elements and retains the first one". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how jquery deletes child elements and retains the first one".

Methods: 1, the use of "$(element). Children ()" to obtain the child element of the element; 2, the use of "sub-element object .not (": first ")" to obtain in addition to the first child element of the child object; 3, use "in addition to the first child element of the child object .remove ()" to delete the child element and retain the first can.

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

How does jquery delete child elements and retain the first one

1. Using children to obtain child elements.

The children () method returns all direct child elements of the selected element.

DOM tree: this method traverses only a single level down the DOM tree.

Tip: if you want to traverse a single level up the DOM tree, or all paths up to the document root element (returning to the parent node or other ancestor), use the parent () or parents () method.

The syntax is:

$(selector) .children (filter)

2. Use not cooperation: first excludes the first child element

The not () method returns elements that do not meet certain conditions.

This method allows you to specify a condition. Elements that do not meet the criteria are returned from the selection, and elements that meet the criteria are removed.

This method is typically used to remove one or more elements from a combination of selected elements.

The first selector selects the first element.

The syntax is

$(": first")

3. Delete elements using remove

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

This method also removes the data and events of the selected element.

The syntax is:

(selector) .remove ()

Examples are as follows:

123/title > .tolerants * {display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5pxposition margin: 15px;} $(document) .ready (function () {$("ul"). Children (). Not (": first"). Remove ();}) Body (ancestor node) div (ancestor node) ul (direct parent node) li (first child node) span (second child node) span (grandnode) li (third child node) span (grandnode) li (fourth child node) span (grandnode)

Output result:

At this point, I believe you have a deeper understanding of "how jquery deletes child elements and retains the first one". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.