DOM_DELETE

Delete

• 삭제 하는 방법은 여러 가지가 있다.
• 첫번째 방법으로는 삭제하려는 요소의 위치를 알고 있는 경우 사용하는 방법이다.
• 앞에서 작성한 블로그에 보면 추가한 TweetDiv를 삭제한다.
• remove 메서드를 사용 하면 된다.

	//예시
	const container = document.querySelector('#container')
	const tweetDiv = document.createElement('div')
	container.append(tweetDiv)
	tweetDiv.remove() // 이렇게 append 했던 요소를 삭제할 수 있다.

id가 container인 요소 아래에 tweetDiv를 추가하고, remove로 삭제한다.

---

여러 개의 자식 요소를 지우려면?

innerHTML

• innerHTML을 이용하면, 간단하게 모든 자식 요소를 지울 수 있다.
• 컨테이너의 모든 자식 요소를 지우려면, 아래와 같이 입력 하면 된다.

	document.querySelector('#container').innerHTML = '';

id가 container인 요소 아래의 모든 요소를 지웁니다.

• innerHTML을 이용하는 방법은 간편하고 편리한 방식이지만 보안에서 몇 가지 문제를 가지고 있다.

removeChild

• 이러한 문제 때문에 'removeChild'는 자식 요소를 지정해서 삭제하는 메서드이다.
• 모든 자식 요소를 삭제하기 위해, 반복문(while, for, etc)을 활용할 수 있다.
• 아래의 코드는 자식 요소가 남아있지 않을 때까지, 첫 번째 자식 요소를 삭제하는 코드이다.

	const container = document.querySelector('#container');
	while (container.firstChild) {
	  container.removeChild(container.firstChild);
	}

container의 첫 번쨰 자식 요소가 존재하면, 첫 번쨰 자식 요소를 제거한다.

• removeChild와 while(반복문)을 이용해 자식 요소를 삭제하면, 제목에 해당하는 부분까지 삭제된다.
• 이를 방지하기 위한 방법은 여러 가지가 있다. 자식 요소가 담고 있는 문자열을 비교해 남기거나, 새로운 변수를 생성하고 할당해뒀다가 반복문이 끝난 뒤에 새롭게 추가할 수도 있으며, 자식 요소를 하나만 남기게 할 수도 있다.

	const container = document.querySelector('#container');
	while (container.children.length > 1) {
 	 container.removeChild(container.lastChild);
	}

container의 자식 요소가 1개만 남을 때까지, 마지막 자식 요소를 제거한다.

• 직접 클래스 이름이 tweet인 요소만 찾아서 지우는 방법도 있다.

	const tweets = document.querySelectorAll('.tweet')
	tweets.forEach(function(tweet){
    tweet.remove();
	})
	// or
	for (let tweet of tweets){
	    tweet.remove()
	}

클래스 이름이 tweet인 요소만 찾아서 제거한다.