Xoá Phần Tử và Thuộc Tính Trong jQuery

Xoá Phần Tử và Thuộc Tính Trong jQuery

Khám phá thêm trong bài học jQuery tiếp theo của Mytour để hiểu rõ hơn về các phương thức và cách xoá 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 cung cấp nhiều phương thức như empty(), remove(), unwrap(),... giúp bạn xoá bỏ các phần tử hoặc nội dung HTML trong tài liệu một cách thuận lợi.

2. Sử Dụng Phương Thức empty() Trong jQuery

Phương Pháp empty() trong jQuery giúp xoá sạch 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ử đã chọn khỏi DOM.

Ví Dụ: Dưới đây là một ví dụ minh họa, xoá toàn bộ nội dung bên trong các phần tử chứa lớp .container khi người dùng click vào nút:

Kết Quả Hiển Thị Như Dưới Đây:

Lưu Ý: Theo đặc tả kỹ thuật DOM của W3C (Tổ chức Toàn Cầu Web), chuỗi văn bản bất kỳ trong một phần tử đều được xem là child node của phần tử đó.

3. Sử Dụng Phương Thức remove() Trong jQuery

Phương Pháp remove() trong jQuery được áp dụng để xoá các phần tử đã chọn khỏi DOM cùng với toàn bộ nội dung bên trong phần tử đó. Tất cả sự kiện và dữ liệu jQuery liên quan đến các phần tử cũng sẽ được xoá kèm theo.

Ví Dụ: Dưới đây là một ví dụ minh họa, xoá toàn bộ các phần tử p có chứa lớp .hint khỏi DOM sau khi người dùng click vào 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ị xoá đi:

Kết Quả Hiển Thị Như Dưới Đây:

Ngoài ra, phương thức remove() trong jQuery còn hỗ trợ việc sử dụng selector như một tham số tùy chọn, giúp người dùng lọc ra các phần tử cần xoá.

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

Kết Quả Hiển Thị 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() của jQuery, ví dụ như remove('.hint, .demo') để lọc nhiều phần tử cùng một lúc.

4. Sử Dụng Phương Thức unwrap() Trong jQuery

Phương Pháp unwrap() trong jQuery được áp dụng để xoá bỏ phần tử cha của các phần tử đã chọn khỏi DOM.

Ví Dụ: Dưới đây là một ví dụ, xoá bỏ phần tử cha của các phần tử p khi người dùng click vào nút:

Kết Quả Hiển Thị Như Dưới Đây:

5. Sử Dụng Phương Thức removeAttr() Trong jQuery

Phương Pháp removeAttr() trong jQuery được sử dụng để xoá bỏ thuộc tính của các phần tử đã chọn.

Ví Dụ: Dưới đây là một ví dụ, xoá bỏ thuộc tính href khỏi phần tử a khi người dùng click vào nút.

Kết Quả Hiển Thị Như Dưới Đây:

Trong bài học này, Mytour đã hướng dẫn một cách thú vị để xoá các phần tử và thuộc tính trong jQuery. Bạn đọc có thể tham khảo thêm nhiều bài học khác trên Mytour để tìm hiểu về hàm callback trong jQuery. Bài học tiếp theo sẽ giới thiệu chi tiết về cách thêm và xoá các lớp CSS bằng jQuery. Hãy cùng theo dõi nhé!