Xóa các phần tử và thuộc tính trong jQuery

Trong bài học dưới đây Taimienphi.vn sẽ hướng dẫn bạn cách xóa các phần tử và thuộc tính trong jQuery, ngoài ra bạn đọc có thể tham khảo thêm một số bài học khác đã có trên Taimienphi.vn để tìm hiểu thêm về cách chèn nội dung vào tài liệu HTML bằng jQuery.

xoa cac phan tu va thuoc tinh trong jquery

Xóa các phần tử và thuộc tính trong jQuery

Tham khảo tiếp bài học jQuery dưới đây của Taimienphi.vn để tìm hiểu các phương thức cũng như cách xóa phần tử và thuộc tính trong jQuery.

Mục Lục bài viết:
1. Xóa các phần tử và thuộc tính trong jQuery
2. Phương thức empty() trong jQuery
3. Phương thức remove() trong jQuery
4. Phương thức unwrap() trong jQuery
5. Phương thức removeAttr() trong jQuery

 

1. Xóa các phần tử và thuộc tính trong jQuery

jQuery hỗ trợ nhiều phương thức, bao gồm empty(), remove(), unwrap(), ... để xóa các phần tử hoặc nội dung HTML trong tài liệu.

 

2. Phương thức empty() trong jQuery

Phương thức empty() trong jQuery xóa tất cả các phần tử con cũng như các phần tử con cháu khác và nội dung văn bản trong các phần tử được chọn khỏi DOM.

Ví dụ: ví dụ dưới đây minh họa cách xóa tất cả các nội dung bên trong các phần tử có chứa lớp .container khi click chọn nút:

xoa cac phan tu va thuoc tinh trong jquery

Kết quả đầu ra có dạng như dưới đây:

xoa cac phan tu va thuoc tinh trong jquery 2

Lưu ý: Theo đặc tả kỹ thuật DOM của W3C (World Wide Web Consortium), chuỗi văn bản bất kỳ trong một phần tử đều được coi là child node của phần tử đó.

 

3. Phương thức remove() trong jQuery

Phương thức remove() trong jQuery được sử dụng để xóa các phần tử được chọn khỏi DOM cũng như các nội dung bên trong phần tử đó. Ngoài các phần tử, tất cả các sự kiện bị ràng buộc và dữ liệu jQuery liên quan đến các phần tử đó cũng sẽ bị xóa.

Ví dụ: trong ví dụ dưới đây minh họa cách xóa tất cả các phần tử p có chứa lớp .hint khỏi DOM sau khi click chọn nút. Các phần tử được lồng bên trong các đoạn văn bản này cũng sẽ bị xóa:

xoa cac phan tu va thuoc tinh trong jquery 3

Kết quả đầu ra có dạng như dưới đây:

xoa cac phan tu va thuoc tinh trong jquery 4

Ngoài ra phương thức remove() trong jQuery cũng cho phép sử dụng selector làm tham số tùy chọn, cho phép người dùng lọc các phần tử cần xóa.

Ví dụ: đoạn mã jQuery DOM bị loại bỏ trong ví dụ trên có thể viết lại như sau:

xoa cac phan tu va thuoc tinh trong jquery 5

Kết quả đầu ra có dạng như dưới đây:

xoa cac phan tu va thuoc tinh trong jquery 6

Lưu ý: chúng ta cũng có thể thêm selector expression làm tham số trong phương thức remove() trong jQuery, chẳng hạn như remove(".hint, .demo") để lọc nhiều phần tử.

 

4. Phương thức unwrap() trong jQuery

Phương thức unwrap() trong jQuery được sử dụng để xóa phần tử cha của các phần tử được lựa chọn khỏi DOM.

Ví dụ: ví dụ dưới đây sẽ xóa phần tử cha của các phần tử p khi click chọn nút:

xoa cac phan tu va thuoc tinh trong jquery 7

Kết quả đầu ra có dạng như dưới đây:

xoa cac phan tu va thuoc tinh trong jquery 8

 

5. Phương thức removeAttr() trong jQuery

Phương thức removeAttr() trong jQuery được sử dụng để xóa thuộc tính của các phần tử được chọn.

Ví dụ: trong ví dụ dưới đây xóa thuộc tính href khỏi phần tử a khi click chọn nút.

xoa cac phan tu va thuoc tinh trong jquery 9

Kết quả đầu ra có dạng như dưới đây:

xoa cac phan tu va thuoc tinh trong jquery 10

https://thuthuat.taimienphi.vn/xoa-cac-phan-tu-va-thuoc-tinh-trong-jquery-52292n.aspx
Bài học trên đây Taimienphi.vn vừa hướng dẫn bạn cách xóa các phần tử và thuộc tính trong jQuery. Ngoài ra bạn đọc có thể tham khảo thêm một số bài học khác đã có trên Taimienphi.vn để tìm hiểu thêm về hàm callback trong jQuery. Trong bài học tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn về cách thêm và xóa các lớp CSS bằng jQuery nhé.

Tác giả: An Nguy     (4.0★- 3 đánh giá)  ĐG của bạn?

  

Bài viết liên quan

Hiệu ứng Slide trong jQuery
Hiệu ứng Fade in và Fade out trong jQuery
Học jQuery, tài liệu tự học lập trình jQuery
Phương thức Getter và Setter trong jQuery
Hàm callback trong jQuery
Từ khoá liên quan:

Xóa các phần tử và thuộc tính trong jQuery

, jQuery, học jQuery,

SOFT LIÊN QUAN
  • jQuery Treeview Plugin

    Hỗ trợ quản lý thư mục jQuery

    jQuery Treeview Plugin là tiện ích mở rộng hữu ích cho người dùng thường xuyên làm việc với jQuery. Download jQuery Treeview Plugin giúp bạn quản lý các file jQuery dễ dàng hơn nhờ việc phân cấp cây thư mục một cách khoa ...

Tin Mới


 Mùa hè tới rồi muốn so sánh giá tìm điều hòa giá rẻ nhất thị trường hãy dùng TopGia để so sanh gia có nhiều mẫu dieu hoa để so sanh sanh, xem dieu hoagiá rẻ để so sánh giá