DOM에서 element 생성 또는 제거

element 생성

// 리스트 하나를 생성하는 경우
// 1. element 생성
const newUl = document.createElement("ul"),
	  newLi1 = document.createElement("li"),
      newLi2 = document.createElement("li");

// 2. li를 ul에 붙임
newUl.appendChild(newLi1);
newUl.appendChild(newLi2);

// 3. ul을 필요한 곳에 붙임
document.querySelector("body").appendChild(newUl)

 

element 제거

// 예를 들어, li 안에 delBtn이 있고, 이를 누르면 li가 지워짐
function handleDelBtnClick(event) {
	event.preventDefault();
    
    const clickedBtn = event.target;
    const clickedLi = clickedBtn.parentNode;
    // console.dir(e.target)을 통해서 parentNode에 대해서 알 수 있음
    
    ul.removeChild(clickedLi);
}

create newBtn = document.createElement("button");
newBtn.innerText = 'DELETE';
newBtn.addEventListener("click", handleDelBtnClick);