Delete elements and attributes in jQuery

Delete elements and attributes in jQuery


In the following lesson, Taimienphi.vn will guide you on how to delete elements and attributes in jQuery, in addition readers can refer to some other lessons already on Taimienphi.vn to learn more about how to insert. Content into HTML documents with jQuery.


Delete elements and attributes in jQuery

Refer to the following jQuery lesson of Taimienphi.vn to learn methods and how to delete elements and attributes in jQuery.

Table of Contents:
1. Delete elements and attributes in jQuery
2. The empty () method in jQuery
3. The remove () method in jQuery
4. The unwrap () method in jQuery
5. The removeAttr () method in jQuery

1. Delete elements and attributes in jQuery

jQuery supports many methods, including empty (), remove (), unwrap (), … to remove HTML elements or content from a document.

2. The empty () method in jQuery

Method empty () in jQuery deletes all children and other descendant elements and the text content of the selected elements from the DOM.

For example: The following example illustrates how to delete all content inside elements containing the class .container When clicking the button:

Remove the fragments and the crystals in jquery

The output will look like the following:

delete components and chemicals in jquery 2

Note: According to the DOM specification of the W3C (World Wide Web Consortium), any text string in an element is considered the child node of that element.

3. The remove () method in jQuery

Method remove () In jQuery it is used to remove selected elements from the DOM as well as the contents within that element. In addition to elements, all bound events and jQuery data related to those elements will also be deleted.

For example: The following example illustrates how to delete all p elements that contain the class .hint from the DOM after clicking the button. Elements nested within these paragraphs will also be deleted:

remove components and chemicals in jquery 3

The output will look like the following:

remove components and chemicals in jquery 4

In addition, the remove () method in jQuery also allows the selector to be used as an optional parameter, allowing the user to filter the elements to be removed.

For example: The jQuery DOM snippet removed in the above example can be rewritten like this:

delete components and chemicals in jquery 5

The output will look like the following:

remove components and chemicals in jquery 6

Note: We can also add the selector expression as a parameter in the remove () method in jQuery, such as remove (“. hint, .demo”) to filter multiple elements.

4. The unwrap () method in jQuery

Method unwrap () in jQuery is used to remove the parent of the selected element from the DOM.

For example: The following example will delete the parent element of the element p When clicking the button:

remove components and chemicals in jquery 7

The output will look like the following:

remove components and chemicals in jquery 8

5. The removeAttr () method in jQuery

Method removeAttr () In jQuery it is used to delete attributes of selected elements.

For example: In the example below delete attribute href from the element a when clicking the button.

delete parts and fragments in jquery 9

The output will look like the following:

delete components and chemicals in jquery 10

https://thuthuat.taimienphi.vn/xoa-cac-phan-tu-va-thuoc-tinh-trong-jquery-52292n.aspx
The above lesson Taimienphi.vn has shown you how to delete elements and attributes in jQuery. Also readers can refer to some other lessons already on Taimienphi.vn to learn more about the callback function in jQuery. In the next lesson, Taimienphi.vn will introduce you more about adding and delete CSS classes with jQuery Please.

.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *