JQuery(제이쿼리) Method/ .remove() - 선택한 요소를 제거하는 메서드)
.remove()
.remove()는 선택한 요소를 HTML 문서에서 제거한다.
문법
.remove( [selector] )
특정 선택자를 가진 요소를 제거할 때는 괄호 안에 선택자를 넣는다. 예를 들어
$( 'p' ).remove( '.rm' );
은 클래스 값으로 rm을 가진 p 요소를 제거한다. 다음과 같이 해도 결과는 같다.
$( 'p.rm' ).remove();
예제
버튼을 클릭하면 rm을 클래스 값으로 가지는 h1 요소를 제거한다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="//code.jquery.com/jquery-3.3.1.js"></script>
<script>
$( document ).ready( function() {
$( 'button' ).click( function() {
$( 'h1' ).remove( '.rm' );
} );
} );
</script>
</head>
<body>
<button>Click to Remove h1 Heading</button>
<h1 class="rm">Lorem ipsum dolor.</h1>
</body>
</html>
결과)
|
참고
|
- 선택한 요소의 내용만 지울 때는 .empty()를 사용한다.
- 선택한 요소의 속성(attribute)를 제거할 때는 .removeAttr()를 사용한다.
- 선택한 요소의 클래스(class)의 값을 제거할 때는 .removeClass()를 사용한다.
반응형
'개발 공부 > JS, JQuery' 카테고리의 다른 글
| JQuery(제이쿼리) Method /.val(), html(), text() - 양식(form)의 값을 가져오거나 값을 설정하는 메소드 (0) | 2023.11.25 |
|---|---|
| JQuery(제이쿼리) 속성추가, 제거, jquery attr(), removeAttr() (0) | 2023.11.25 |
| JQuery(제이쿼리) 이벤트 사용시 $(this)의미와 활용 (0) | 2023.11.25 |
| Ajax 사용 - Ajax 메소드 $.ajax() $.get() $.post() .load() (0) | 2023.11.24 |
| element 요소 조작 (append, prepend, before, after, parent) (0) | 2023.11.24 |
