Bài jQuery 16: Xóa phần tử và thuộc tính trong jQuery

0
161

Xin chào các bạn, trong bài học ngày hôm nay mình sẽ giới thiệu đến các bạn cách xóa phần tử và thuộc tính trong jQuery.

Xóa phần tử hoặc nội dung

jQuery cung cấp rất nhiều phương thức, chẳng hạn như empty(), remove(), unwrap(), v.v. để xóa các phần tử hoặc nội dung HTML hiện có khỏi chương trình.

Phương thức empty()

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

Ví dụ sau sẽ loại bỏ tất cả nội dung bên trong các phần tử với class .container khi người dùng nhấp vào nút.

Phương thức remove()

Phương thức remove() loại bỏ các phần tử được chọn khỏi DOM cũng như mọi thứ bên trong nó. 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 bị loại bỏ.

Ví dụ sau sẽ xóa tất cả các phần tử <p> với class .hint khỏi nút DOM khi nhấp vào nút. Các yếu tố lồng nhau bên trong các đoạn này cũng sẽ bị loại bỏ.

Phương thức remove() của jQuery cũng có thể bao gồm một selector làm tham số tùy chọn, cho phép bạn lọc các phần tử cần loại bỏ. Ví dụ, đoạn code sau loại bỏ jQuery DOM của ví dụ trước có thể được viết lại như sau:

Phương thức unwrap()

Phương thức jQuery unwrap() loại bỏ các phần tử cha của các phần tử được chọn khỏi DOM. Đây thường là nghịch đảo của phương thức wrap().

Ví dụ sau sẽ xóa phần tử cha của các phần tử <p> khi nhấp vào nút.

Phương thức removeAttr()

Phương thức jQuery removeAttr() loại bỏ một thuộc tính khỏi các phần tử được chọn.

Ví dụ bên dưới sẽ xóa thuộc tính href dưới dạng các phần tử <a> khi nhấp vào nút.

Kết luận

Như vậy trong bài học ngày hôm nay mình đã giới thiệu đến các bạn cách xóa phần tử và thuộc tính trong jQuery. Trong bài học tiếp theo chúng ta sẽ cùng nhau tìm hiểu về Thêm và xóa class CSS trong jQuery.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây