HTML DOM Select remove() 메서드 – 드롭다운 옵션 삭제 방법 완벽 정리

HTML DOM의 select remove() 메서드는 HTML 문서에서 드롭다운 목록(select 요소)에 포함된 옵션을 삭제할 때 사용합니다. 웹 페이지에서 셀렉트 박스의 항목을 동적으로 추가·제거해야 하는 경우 유용하게 활용할 수 있습니다.

문법

remove() 메서드의 기본 문법은 다음과 같습니다.

object.remove(index)

index 매개변수는 드롭다운 목록에서 삭제하고자 하는 옵션의 인덱스 번호를 의미합니다. 인덱스는 0부터 시작하며, 인덱스를 생략하고 호출하면 첫 번째 옵션이 자동으로 삭제됩니다.

예제

아래 예제를 통해 HTML DOM select remove() 메서드의 실제 동작 방식을 살펴보겠습니다. 버튼을 클릭하면 드롭다운 목록에서 첫 번째 과목인 '물리학'이 제거됩니다.

<!DOCTYPE html>
<html>
<head>
<style>
    html{
        height:100%;
    }
    body{
        text-align:center;
        color:#fff;
        background: radial-gradient( circle farthest-corner at 23.1% 64.6%, rgba(129,125,254,1) 0%, rgba(111,167,254,1) 90% ) no-repeat;
        height:100%;
    }
    p{
        font-weight:700;
        font-size:1.1rem;
    }
    .drop-down{
        display:block;
        width:35%;
        border:2px solid #fff;
        font-weight:bold;
        padding:2px;
        margin:1rem auto;
        outline:none;
    }
    .btn{
        background:orange;
        border:none;
        height:2rem;
        border-radius:2px;
        width:35%;
        margin:2rem auto;
        display:block;
        color:#fff;
        font-weight:bold;
        outline:none;
        cursor:pointer;
    }
    .show{
        font-size:1.5rem;
        font-weight:bold;
    }
</style>
</head>
<body>
<h1>DOM Select remove() 메서드 데모</h1>
<p>안녕하세요! 좋아하는 과목을 선택하세요:</p>
<select class='drop-down' name="Drop Down List">
<option>물리학</option>
<option>생물학</option>
<option>수학</option>
</select>
<button type="button" onclick="removeSubject()" class="btn">물리 과목 삭제</button>
<div class="show"></div>
<script>
    function removeSubject() {
        var dropDown = document.querySelector(".drop-down");
        document.querySelector(".show").innerHTML="물리 과목이 삭제되었습니다";
        dropDown.remove(0);
    }
</script>
</body>
</html>

실행 결과

위 코드를 브라우저에서 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM Select remove() 메서드 – 드롭다운 옵션 삭제 방법 완벽 정리

'물리 과목 삭제' 버튼을 클릭하면 드롭다운 목록의 첫 번째 항목인 '물리학'이 삭제되고, 아래와 같이 안내 문구가 함께 표시됩니다.

HTML DOM Select remove() 메서드 – 드롭다운 옵션 삭제 방법 완벽 정리

참고 사항

인덱스는 0부터 시작하므로, 첫 번째 옵션의 인덱스는 0입니다.
존재하지 않는 인덱스를 전달하면 아무런 변화가 발생하지 않습니다.
매개변수 없이 remove()를 호출하면 기본적으로 첫 번째 옵션이 삭제됩니다.