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.
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.
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:
Kết quả đầu ra có dạng như dưới đây:
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:
Kết quả đầu ra có dạng như dưới đây:
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:
Kết quả đầu ra có dạng như dưới đây:
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:
Kết quả đầu ra có dạng như dưới đây:
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.
Kết quả đầu ra có dạng như dưới đây:
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é.