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óaXó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[];
7Phươ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ấpLư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ẩynú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étNế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
- Sử dụng phương pháp
document.getElementById[]
để chọn nút con - Sử dụng phương pháp
4 để chọn phần tử cha gián tiếpbobbyhadz.com
Child 1
Child 2
Child 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ếpNế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[];
1Phươ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