HTML DOM의 deleteCaption() 메서드는 HTML 문서 내 테이블(table)에서 첫 번째 <caption> 요소를 삭제하는 역할을 합니다. 캡션은 테이블의 제목이나 설명을 나타내는 요소로, 이 메서드를 호출하면 해당 캡션이 즉시 화면에서 제거됩니다.
구문(Syntax)
deleteCaption() 메서드의 기본 구문은 다음과 같습니다.
object.deleteCaption()
메서드는 매개변수를 받지 않으며, 호출 대상이 되는 테이블 객체에 직접 실행하면 됩니다.
예제(Example)
아래 예제는 deleteCaption() 메서드를 활용하여 버튼 클릭 시 테이블의 캡션을 삭제하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
text-align: center;
}
table {
margin: 2rem auto;
}
caption {
color: #db133a;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
.show {
font-size: 1.2rem;
}
</style>
<body>
<h1>DOM Table deleteCaption() Method Demo</h1>
<table border="2">
<caption>Student Data</caption>
<tr>
<th>Name</th>
<th>Roll No.</th>
</tr>
<tr>
<td>John</td>
<td>071717</td>
</tr>
<tr>
<td>Jane</td>
<td>031717</td>
</tr>
</table>
<button onclick="remove()" class="btn">Remove Caption</button>
<script>
function remove() {
var tableCaption = document.querySelector('table').deleteCaption();
}
</script>
</body>
</html>출력 결과(Output)
위 코드를 실행하면 학생 데이터(Student Data)라는 캡션이 포함된 테이블과 빨간색 버튼이 화면에 나타납니다.
Remove Caption(캡션 제거) 버튼을 클릭하면 테이블에서 캡션이 삭제되어 아래와 같이 제목 없는 테이블만 남게 됩니다.
참고 사항
deleteCaption() 메서드와 반대로, 테이블에 새로운 캡션을 동적으로 추가하고 싶다면 createCaption() 메서드를 사용할 수 있습니다. 두 메서드를 조합하면 사용자 인터랙션에 따라 테이블 제목을 자유롭게 추가하거나 제거하는 UI를 손쉽게 구현할 수 있습니다.