Nội dung

36.15 JS DOM removeChild vs remove - Cách Xóa Phần Tử DOM Với JavaScript

Trong video này, chúng ta sẽ cùng tìm hiểu cách sử dụng hai phương thức quan trọng để xóa phần tử trong DOM của JavaScript: `removeChild` và `remove`. Đây là những kiến thức cơ bản nhưng vô cùng cần thiết khi làm việc với các thành phần trên trang web. Đầu tiên, chúng ta sẽ bắt đầu với phương thức `removeChild`. Phương thức này được sử dụng để xóa một phần tử con từ phần tử cha của nó. Để sử dụng `removeChild`, chúng ta cần chọn được phần tử cha và phần tử con mà chúng ta muốn xóa. Chúng ta sẽ thực hiện các bước sau: 1. Chọn phần tử cần xóa bằng cách sử dụng `document.querySelector`. 2. Chọn phần tử cha của phần tử cần xóa, cũng sử dụng `document.querySelector`. 3. Sử dụng phương thức `removeChild` của phần tử cha để xóa phần tử con đã chọn. Trong ví dụ này, chúng ta sẽ chọn một phần tử con với id là "item2" và phần tử cha của nó là một danh sách không thứ tự với id là "list". Sau đó, chúng ta sẽ xóa phần tử "item2" khỏi danh sách này. Ngoài ra, chúng ta cũng sẽ tìm hiểu một cách ngắn gọn hơn để xóa phần tử con mà không cần phải rõ ràng chọn phần tử cha. Cách này sử dụng thuộc tính `parentElement` của phần tử con để truy xuất đến phần tử cha và sau đó gọi phương thức `removeChild`. Tiếp theo, chúng ta sẽ khám phá phương thức `remove`. Phương thức này đơn giản hơn và không yêu cầu chúng ta phải chọn phần tử cha. Chúng ta chỉ cần chọn trực tiếp phần tử cần xóa và gọi phương thức `remove` trên phần tử đó. Trong phần này của video, chúng ta sẽ chọn một phần tử con khác với id là "item4" và sử dụng phương thức `remove` để xóa nó khỏi DOM. Video này không chỉ giúp bạn hiểu rõ hơn về cách sử dụng hai phương thức `removeChild` và `remove`, mà còn giúp bạn nắm bắt được cách thao tác với DOM một cách hiệu quả. Bạn sẽ học được cách chọn phần tử, hiểu cấu trúc của DOM và cách tương tác với các phần tử con và cha. Hy vọng rằng sau khi xem video này, bạn sẽ cảm thấy tự tin hơn khi làm việc với các phần tử trên trang web và biết cách xóa các phần tử không cần thiết một cách chính xác. Đây là những kỹ năng cơ bản nhưng vô cùng quan trọng khi bạn bắt đầu bước vào thế giới lập trình JavaScript và phát triển web.