Home  >  Article  >  Web Front-end  >  How to clear child elements in jquery

How to clear child elements in jquery

WBOY
WBOYOriginal
2021-11-30 10:43:2512692browse

Jquery method of clearing child elements: 1. Use the children() method to obtain all child element objects under the parent element. The syntax is "parent element object.children()"; 2. Use the remove() method to The obtained child element object can be cleared, and the syntax is "child element object.remove()".

How to clear child elements in jquery

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

How jquery clears child elements

In jquery, by obtaining the element object, use the children() method to obtain its child elements, use The remove() method can be used to delete child elements.

The example is as follows:

1. Create a new html file, named test.html, to explain how jquery deletes child elements. Use the div tag to create a module, and within the div, use the p tag to create a line of text.

In order to show the effect, in the test.html file, use css to set the style of the div, define the width of the div as 200px, the height as 30px, the line height as 30px, and the background color as red. At the same time, define the p tag The text is white.

Create a button with the button tag, and the button name is "Delete the child elements of the div". Bind the onclick click event to the button button. When the button is clicked, the myfun() function is executed.

How to clear child elements in jquery

2. In the js tag, create the myfun() function. Within the function, obtain the div object through the element name, and use the children() method to obtain the child elements of the div. , delete all child elements under the div through the remove() method.

How to clear child elements in jquery

Open the test.html file in the browser and click the button to see the effect.

How to clear child elements in jquery

After clicking the button:

How to clear child elements in jquery

Summary:

1. Create a test.html file .

2. In the file, use the div tag to create a module, and in the div, use the p tag to create a line of text. At the same time, create a button button to trigger the execution of the js function.

3. Create a function in the js tag. In the function, obtain the div object through the element name. Use the children() method to obtain the child elements of the div. Use the remove() method to remove all the children under the div. Element removed.

Note:

The children() method gets all the child elements under the element object.

Recommended related video tutorials: jQuery video tutorial

The above is the detailed content of How to clear child elements in jquery. 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