removeChild 메서드

removeChild 메서드는 요소를 삭제할 수 있게 해줍니다. 부모 요소에 적용됩니다 삭제하려는 요소를 지정하여.

구문

부모.removeChild(요소);

단락 #elem을 삭제해 봅시다. 이를 위해 그의 부모 #parent를 얻고 removeChild 메서드를 얻은 부모에 적용하며, 메서드 매개변수로 삭제하려는 요소를 전달합니다:

<div id="parent">
	<p id="elem">elem 1</p>
	<p>elem 2</p>
</div>

let parent = document.querySelector('#parent');
let elem = document.querySelector('#elem');

parent.removeChild(elem);

코드 실행 결과:

<div id="parent">
	<p>elem 2</p>
</div>

요소를 삭제해야 하지만, 그 부모에 대한 참조가 없는 경우 - 부모는 parentElement를 통해 얻을 수 있습니다:

<div>
	<p id="elem">elem 1</p>
	<p>elem 2</p>
</div>

let elem = document.querySelector('#elem');
elem.parentElement.removeChild(elem);

코드 실행 결과:

<div id="parent">
	<p>elem 2</p>
</div>