How to remove an element with jquery

Jquery method to remove an element: 1. Use the empty() function, the syntax "specify the element object.empty()"; 2. Use the remove() function, the syntax "specify the element object.remove() )"; 3. Use the detach() function, the syntax is "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

Remove matching elements from the collection from the DOM all child nodes of .
Example:

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

Removal method:

$('.hello').empty();

Effect:

<div class="container">
   <div class="hello"></div>
   <div class="goodbye">Goodbye</div>
</div>

If

contains any number of nested elements, they also will be removed.
In order to avoid memory leaks, jQuery first removes the data and event handling functions of the child elements, and then removes the child elements

2. remove() method:

Description: Remove the set of matching elements from the DOM. (Also removes 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 will also remove everything inside the element, including bound events and jQuery data related to the element

Example:

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

Removal method:

$('.hello').remove();
或者用
$('div').remove('.hello');

Effect:

<div class="container">
   <div class="goodbye">Goodbye</div>
</div>

That is to say, the own p corresponding to the class is also removed

3. detach() method:

Remove all matching elements from the DOM

detach() method and .remove() Same, except .detach() saves 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 later.

4. html("") method:

html() method returns the selected element if no parameters are set. 's current content. html("") Clears the current content of the selected element.

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

The final effect of the two is the same

• html() return value: String, which means it can be received by variables

• empty() return value: jQuery cannot use variables to receive

In addition:

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

For example, declare variable p in the following form

var p=$('p').remove();

When you need to add it again, you can directly add it as follows

p.appendTo("body");

This is a function of both the detach() and remove() methods. The difference between remove() and detach() is that remove() can delete specified classes such as remove('a'), but detach() cannot do this.

Also note that

When you use the remove() method to remove an element and then add it, the events of the subset will not exist, but the events of the detach() subset can still be executed. .

【Recommended learning:

jQuery video tutorial, web front-end development video】

The above is the detailed content of How to remove an element with jquery. For more information, please follow other related articles on the PHP Chinese website!