[JS] 닫기버튼을 만들어 부모 태그 없애기 (display: none)

복잡한 자바스크립트 없이 HTML의 button을 사용하여 클릭 한 번 만으로 부모클래스를 사라지게 하는 방법에 대해 알아보도록 하겠습니다.

Close button

버튼을 만드는 방법은 다양한데 이번에는 <button> 태그를 사용하여 구현해볼까 합니다.

HTML 속성 추가

HTML에 임의의 Container를 생성하고 그 안에 button 태그를 입혀보겠습니다.

<div class="someContainer"> 
    <button onclick="this.parentElement.style.display='none'">
      <span>&times;</span>
    </button>
</div>

Javascript 

button태그 안의 onclick에 자바스크립트를 직접 넣어준 형태인데, 살펴보자면 아래와 같습니다.

• this : "자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수"
• parentElement : "노드의 부모 요소를 반환하는데, 부모가 없거나 부모가 DOM 요소가 아니라면 null을 반환한다"
• style : "부모 요소의 스타일"
• display ='none' : "부모 요소의 영역을 없앤다"

span

button태그 안에 자식 태그로 <span>&times;</span>는 X 아이콘을 유니코드로 넣은 것인데, 이것을 빼고 텍스트 또는 아이콘을 직접 넣어줄 수 있습니다.

Demo

See the Pen close btn by 서근 (@seogun95) on CodePen.

---

오늘은 이렇게 HTML의 button을 사용하여 클릭 한 번 만으로 부모 클래스를 사라지게 하는 방법에 대해 알아보았습니다.

 

읽어주셔서 감사합니다🤟