[jQuery] jQuery empty 메소드를 사용하여 폼 요소 비우기

22 Dec 2023

jQuery

jQuery의 empty 메소드는 선택한 요소의 자식 요소를 모두 제거합니다. 이를 사용하여 폼 요소를 비울 수 있습니다.

예제

아래 예제에서는 “clear” 버튼을 클릭했을 때, 폼 안의 모든 입력 필드를 비우는 방법을 보여줍니다.

$(document).ready(function(){
  $("#clearBtn").click(function(){
    $("form input[type='text']").val(''); //텍스트 입력 필드 비우기
    $("form textarea").val(''); //텍스트 영역 비우기
    $("form select").prop('selectedIndex', 0); //선택 박스 선택 해제
    $("form input[type='checkbox']").prop('checked',false); //체크박스 해제
  });
});

설명

$(document).ready(function(){...}) - HTML 문서가 로드되면 실행될 JavaScript를 정의합니다.
$("#clearBtn").click(function(){...}) - “clearBtn” id를 가진 요소가 클릭되었을 때 실행될 함수를 정의합니다.
$("form input[type='text']").val(''); - input[type='text'] 필드를 선택하여 값을 비웁니다.
$("form textarea").val(''); - textarea 필드를 선택하여 값을 비웁니다.
$("form select").prop('selectedIndex', 0); - select 요소의 선택된 값을 첫 번째로 되돌립니다.
$("form input[type='checkbox']").prop('checked',false); - input[type='checkbox'] 항목의 체크를 해제합니다.

이 예제를 사용하면 폼 안의 입력된 내용을 empty 메소드를 사용하여 쉽게 비울 수 있습니다.

예제

설명

참고 자료