Xóa các phần tử HTML với jQuery

Các bài học trước chúng ta đã tìm hiệu một số phương thức trong jQuery để thao tác với các phần tử DOM như: Thêm vào, tìm kiếm thay thế, làm việc với thuộc tính và các phần tử form.

Bài học hôm nay chúng ta sẽ tìm hiểu một số phương thức để xóa bỏ các phần tử HTML ra khỏi cấu trúc DOM.

.remove(selector)

Phương thức .remove () sẽ xóa bỏ thành phần được chọn ra khỏi cấu trúc HTML (bao gồm cả thành phần con, cháu của nó nếu có) trước khi nó được hiện thị lên trình duyệt.

<div class="link">
  <div class="about">About</div>
  <div class="search">Search</div>
  <div class="product">
      <div>About</div>
      <div>Search</div>
  </div>
</div>

Đoạn code sau sẽ xóa toàn bộ thành phần div.product ra khỏi trang web của chúng ta:

$("div").remove(".product");

Hoặc chúng ta có thể viết đơn giản hơn như sau:

$(".product").remove();

Trong đa số các trường hợp, cách viết thứ 2 được sử dụng nhiều hơn

Xóa bỏ các thành phần con, cháu của một thành phần

Phương thức .empty() sẽ xóa các thành phần là con, cháu của một thành phần ra khỏi cấu trúc HTML và thành phần cha vẫn được giữ lại. Khác với .remove() thành phần cha cũng bị xóa bỏ.

Ví dụ sau sẽ xóa toàn bộ các thành phần con, cháu của thẻ div.link và thêm vào một thành div mới như sau:

$(".link").empty().html('<div>Thành phần div mới được thêm vào sau khi các thành phần con, cháu của div.link bị xóa bỏ</div>');

Kết quả đoạn mã ban đầu trở thành như sau:

<div class="link">
<div>Thành phần div mới được thêm vào sau khi các thành phần con, cháu của div.link bị xóa bỏ</div>
</div>

Xóa bỏ thành phần cha của một thành phần

wrap() là phương thức cho phép thêm vào thành phần cha của một thành phần.  Tương tự thế unwrap() là phương thức cho phép làm ngược lại: cho phép xóa bỏ thành phần cha của nó ra khỏi cấu trúc DOM.

Ví dụ sau sẽ xóa thành phần cha của thành phần div.product là div.link ra khỏi cấu trúc HTML

$(".product").unwrap();

Kết quả đoạn mã ban đầu trở thành như sau:

<div class="about">About</div>
<div class="search">Search</div>
<div class="product">
      <div>About</div>
      <div>Search</div>
</div>

KẾT LUẬN

Bên trên là 3 phương thức phổ biến trong jQuery để lại bỏ các phần tử HTML ra khỏi cấu trúc của nó trước khi được hiện thị lên trình duyệt. Hy vọng những bài viết vừa qua sẽ giúp ích ít nhiều cho bạn trong việc tìm hiểu jQuery.

Tagged as: jQuery, sua doi cau truc html trong jquery

Peter Tran là một Coder, công việc hiện tại của anh ấy là phát triển ứng dụng web với PHP, thời gian rảnh anh ấy thường viết Blog chia sẻ những kiến thức về lập trình và phát triển website. Hãy xem trang cá nhân của anh ấy trên Facebook và Twitter

Bài liên quan

• Sửa đổi cấu trúc HTML trong jQuery (Phần 3)
• Sửa đổi cấu trúc HTML trong jQuery (Phần 2)
• Làm việc với CSS trong jQuery
• Sửa đổi cấu trúc HTML trong jQuery (Phần 1)
• Kiểm tra Form với jQuery Validate