[DOM]JavaScript를 사용하여 HTML 요소 삭제하기

요소 자신 삭제

먼저 선택한 요소를 삭제하려면 해당 요소를 선택해야 합니다. 아래 코드는 class=one을 가진 요소를 선택합니다.

let liOne = document.querySelector(".one");

그 후 remove 메서드를 사용하여 선택한 요소를 삭제합니다.

liOne.remove();

부모의 자식 삭제

요소의 부모 태그를 선택한 다음, 삭제할 자식 요소를 선택합니다. 아래 코드는 <ul> 태그를 선택하고 <ul> 태그의 자식 중 class=removeTarget 를 가진 요소를 선택합니다.

let ulTag = document.querySelector("ul"); // 부모 선택
let removeTarget = document.querySelector(".removeTarget"); // 삭제할 자식 선택

그 후, removeChild 메서드를 사용하여 선택한 자식 요소를 삭제합니다.

ulTag.removeChild(removeTarget);

이러한 방식으로 JavaScript를 사용하여 HTML 요소를 삭제할 수 있으며, 동적으로 웹 페이지에서 요소를 제거하는 데 유용하게 활용할 수 있습니다.