Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How jquery removes an element

2025-02-23 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

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

This article introduces the knowledge of "how to remove an element from jquery". Many people will encounter this dilemma in the operation of actual cases, 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!

Jquery method to remove an element: 1, use the empty () function, syntax "specify element object .empty ()"; 2, use remove () function, syntax "specify element object .remove ()"; 3, use detach () function, syntax "specify element object .detach ()".

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

JQuery remove element method

1. Empty () method

Removes all child nodes of matching elements in the collection from the DOM.

Example:

Hello Goodbye

Removal method:

$('.hello') .empty ()

Effect:

Goodbye

If

If it contains any number of nested elements, they will also be removed.

To avoid memory leaks, jQuery first removes the data and event handlers of child elements, and then removes child elements

2. Remove () method:

Description: removes the collection of matching elements from the DOM. (remove both events and jQuery data on the element. )

Similar to .empty (). . remove () moves the element out of the DOM. When we want to remove the element itself, we use .remove (), which also removes everything inside the element, including bound events and jQuery data associated with the element.

Example:

Hello Goodbye

Removal method:

$('.hello'). Remove (); or use $('div'). Remove (' .hello')

Effect:

Goodbye

That is to say, the p corresponding to class has also been removed.

3. Detach () method:

Remove all matching elements from DOM

The detach () method is the same as .remove (), except that .detach () holds all jQuery data associated with the removed element. This method is useful when you need to remove an element and then insert it into the DOM soon.

4. Html ("") method:

The html () method returns the current content of the selected element if no parameter is set. Html (") clears the current contents of the selected element.

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

The final effect of the two is the same.

Html () returns a value: String, that is, it can be received as a variable.

Empty () returns a value: jQuery cannot be received as a variable

In addition:

The empty () method has no parameters, and the empty subset and text cannot be restored. The detach () and remove () methods can save it in a variable.

Such as the declaration variable p is written in the following form

Var paired $('p') .remove ()

When you need to add a new one, you can directly add the following

P.appendTo ("body")

This is the function of both the detach () and remove () methods. Remove () differs from detach () in that remove () can delete a specified class such as remove ('a'), while detach () cannot.

Also note that when the element is removed with the remove () method and then added, the events of the subset will not exist, while the events of the subset of detach () can also be executed.

That's all for "how jquery removes an element". 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.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report