Làm cách nào để xóa con khỏi cha mẹ trong JavaScript?

Trong bài viết này, chúng ta sẽ thảo luận về cách xóa nút con của một phần tử cụ thể trong JavaScript bằng các ví dụ thích hợp

Để xóa nút con của một phần tử cụ thể, có một phương thức hiện có trong JavaScript được gọi là removeChild()

Phương thức removeChild() khác với phương thức remove(). Phương thức remove() giúp chúng ta loại bỏ chính nó. Trong khi đó, với sự trợ giúp của phương thức removeChild(), chúng ta có thể xóa nút con khỏi nút cha

Bây giờ, hãy xem cú pháp và cách sử dụng thuộc tính removeChild()

cú pháp

Cú pháp của phương thức removeChild() là -

removeChild(childNode);

Trong đó, childNode là nút sẽ bị xóa. Nút bị loại bỏ được trả lại

ví dụ 1

Đây là một chương trình ví dụ để xóa tất cả các nút trong danh sách bằng phương thức removeChild() trong đó phần tử cuối cùng của danh sách sẽ bị xóa mỗi lần cho đến khi danh sách trống

Nếu đây là thứ bạn cần xử lý, bạn có thể kiểm tra có điều kiện trước khi gọi phương thức remove()

const child = document.getElementById('child');

child?.parentElement?.remove();

Chúng tôi đã sử dụng chuỗi tùy chọn (?. ) thành đoản mạch thay vì đưa ra lỗi nếu phần tử không có cha

Lưu ý rằng bạn có thể truy cập thuộc tính parentElement nhiều lần nếu phần tử bạn muốn xóa không phải là phần tử gốc trực tiếp

Và đây là mã JavaScript liên quan

const child = document.getElementById('child');

child.parentElement.parentElement.remove();

Chúng tôi đã truy cập thuộc tính parentElement hai lần để đến phần tử

const child = document.getElementById('child');

child?.parentElement?.remove();

5 mà chúng tôi muốn xóa

Xóa phần tử cha mà không xóa phần tử con

Để xóa phần tử cha mà không xóa phần tử con của nó, hãy gọi phương thức

const child = document.getElementById('child');

child?.parentElement?.remove();

6 trên phần tử cha với tham số là các nút con, e. g.

const child = document.getElementById('child');

child?.parentElement?.remove();

7

Phương thức

const child = document.getElementById('child');

child?.parentElement?.remove();

8 thay thế phần tử bằng một tập hợp các đối tượng Node

Đây là HTML cho các ví dụ trong bài viết này

  
    
    bobbyhadz.com
  

  
    

      
Child 1
      
Child 2
      
Child 3
    


    
  

Và đây là mã JavaScript liên quan

________số 8_______

Chúng tôi đã sử dụng phương pháp document.getElementById() để chọn phần tử cha

Sau đó, chúng tôi đã gọi phương thức thay thế để thay thế phần tử cha bằng các nút con của nó

Phương thức

const child = document.getElementById('child');

child?.parentElement?.remove();

8 lấy một tập hợp các đối tượng

const child = document.getElementById('child');

child.parentElement.parentElement.remove();

1 hoặc

const child = document.getElementById('child');

child.parentElement.parentElement.remove();

2 làm tham số và thay thế phần tử mà nó được gọi bằng các giá trị được cung cấp

Lưu ý rằng chúng tôi đã sử dụng cú pháp lây lan (. ) để giải nén

const child = document.getElementById('child');

child.parentElement.parentElement.remove();

3 nút con trong lệnh gọi phương thức

const child = document.getElementById('child');

child?.parentElement?.remove();

8

Điều này là cần thiết vì phương thức

const child = document.getElementById('child');

child?.parentElement?.remove();

6 yêu cầu một danh sách các đối tượng

const child = document.getElementById('child');

child.parentElement.parentElement.remove();

1 hoặc

const child = document.getElementById('child');

child.parentElement.parentElement.remove();

2 được phân tách bằng dấu phẩy

nút. Thuộc tính childNodes trả về một

const child = document.getElementById('child');

child.parentElement.parentElement.remove();

3 chứa các nút con của phần tử

Các nút con bao gồm

• phần tử DOM
• nút văn bản
• bình luận

Bạn có thể thấy mọi người sử dụng thuộc tính con thay vì

const child = document.getElementById('child');

child.parentElement.parentElement.remove();

9, nhưng chúng khác vì

  
    
    bobbyhadz.com
  

  
    

      
Child 1
      
Child 2
      
Child 3
    


    
  

0 chỉ trả về một tập hợp các phần tử, nó không bao gồm các nút văn bản và nhận xét

Nếu phần tử không có bất kỳ nút con nào, thuộc tính

const child = document.getElementById('child');

child.parentElement.parentElement.remove();

9 sẽ trả về một giá trị ____2_______3 trống và chúng tôi sẽ chỉ xóa phần tử mà không thay thế nó bằng bất kỳ thứ gì

Không có lỗi nào được đưa ra, vì vậy chúng tôi không phải xử lý bất kỳ điều gì đặc biệt trong trường hợp này

Xóa phần tử mẹ gián tiếp của nút

Để loại bỏ một phần tử cha mẹ gián tiếp của một nút

1. Sử dụng phương pháp document.getElementById() để chọn nút con
2. Sử dụng phương pháp

   
   
     
       
       bobbyhadz.com
     
   
     
       
   
         
   Child 1
         
   Child 2
         
   Child 3
       
   
   
       
     
   
   

   4 để chọn phần tử cha gián tiếp
3. Gọi phương thức remove() trên cha mẹ để loại bỏ nó

Và đây là mã JavaScript liên quan

const child = document.getElementById('child');

const parent = child.closest('div.container');

parent.remove();

Chúng tôi đã sử dụng phương pháp

  
    
    bobbyhadz.com
  

  
    

      
Child 1
      
Child 2
      
Child 3
    


    
  

6 thay vì thuộc tính parentElement khi chúng tôi đang cố xóa một phần tử không phải là phần tử gốc trực tiếp

Nếu chính phần tử khớp với bộ chọn, phần tử được trả về

Nếu không tồn tại phần tử khớp với bộ chọn được cung cấp, phương thức gần nhất() trả về

const child = document.getElementById('child');

child?.parentElement?.remove();

1

Phương thức lấy một chuỗi chứa bộ chọn. Bộ chọn được cung cấp có thể cụ thể khi cần thiết

Làm cách nào để xóa con trong JavaScript?

Làm cách nào để xóa con đầu lòng trong JavaScript?

Làm cách nào để xóa con cuối cùng trong JavaScript?

Làm cách nào để xóa đối tượng gốc trong JavaScript?