jQuery / Reference / .remove()
개요
- .remove()는 선택한 요소를 HTML 문서에서 제거합니다.
문법
.remove( [selector] )
- 특정 선택자를 가진 요소를 제거할 때는 괄호 안에 선택자를 넣습니다. 예를 들어 다음은 클래스 값으로 rm을 가진 p 요소를 제거합니다.
$( 'p' ).remove( '.rm' );
- 다음과 같이 해도 결과는 같습니다.
$( '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()를 사용합니다.
jQuery / Reference / .slideDown()
개요 .slideDown()은 선택한 요소를 아래쪽으로 서서히 나타나게 합니다. 문법 .slideDown( ) duration 요소가 나타날 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. easing 요소가 나타나는 방식을 정합니다. swing과 linear가 가능하며, 기본값은 swing입니다. complete 요소가 나타난 후 수행할 작업을 정합니다. 예제 1 버튼을 클릭하면 파란색 배경의 div ...
개요 .css()로 선택한 요소의 css 속성값을 가져오거나 style 속성을 추가할 수 있습니다. 문법 1 - 속성의 값 가져오기 .css( propertyName ) propertyName의 속성값을 가져옵니다. 예를 들어 다음은 h1 요소의 스타일 중 color 속성의 값을 가져옵니다. $( "h1" ).css( "color" ); 문법 2 - 속성 추가하기 .css( propertyName, value ) style 속성을 추가합니다. 예를 들어 다음은 h1 요소에 style 속성을 ...
개요 :button은 type이 button인 요소를 선택하는 선택자입니다. 문법 type이 button인 모든 요소를 선택합니다. $( ':button' ) type이 button이면서 class 값으로 xy를 갖는 요소를 선택합니다. $( '.xy:button' ) 예제 type이 button인 요소의 글자 모양을 기울임꼴로 만듭니다. 클래스 값이 ab면서 type이 button인 요소의 글자 색은 빨간색으로 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> ...
개요 .each()는 선택한 요소가 여러 개일 때 각각에 대하여 반복하여 함수를 실행합니다. 문법 .each( function ) 특정 조건을 만족할 때 반복 작업에서 빠져려면 다음을 추가합니다. return false 예제 1 p 요소에 각각 다른 클래스를 추가합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> ...
개요 .attr()은 요소(element)의 속성(attribute)의 값을 가져오거나 속성을 추가합니다. 문법 1 - 속성의 값 가져오기 .attr( attributeName ) 예를 들어 아래는 div 요소의 class 속성의 값을 가져옵니다. $( 'div' ).attr( 'class' ); 문법 2 - 속성 추가하기 .attr( attributeName, value ) 예를 들어 아래는 h1 요소에 title 속성을 추가하고 속성의 값은 Hello로 합니다. $( 'h1' ).attr( 'title', 'Hello' ); 예제 1 ...
개요 .width()는 선택한 요소의 가로 크기를 반환하거나, 가로 크기를 변경합니다. 문법 1 .width() 선택한 요소의 가로 크기를 반환합니다. 예를 들어 다음은 p 요소의 가로 크기를 변수 jbVar에 저장합니다. var jbVar = $( 'p' ).width(); 문법 2 .width( value ) 선택한 요소의 가로 크기를 변경합니다. 예를 들어 다음은 h1 요소의 가로 크기를 100px로 만듭니다. $( 'h1' ).width( '100px' ); 예제 1 선택한 요소의 가로 ...
jQuery / Reference / .append()
개요 .append()는 선택한 요소의 내용의 끝에 콘텐트를 추가합니다. 문법 .append( content ) 예제 1 순서 없는 목록 마지막에 Dolor를 추가합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { line-height: ...
jQuery / Reference / .prependTo()
개요 .prependTo()는 선택한 요소를 다른 요소의 시작 태그 뒤로 이동시킵니다. 문법 .prependTo( target ) 예제 abc를 클래스 값으로 가지는 span 요소를 h1 요소의 <h1> 뒤로 이동시킵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { ...
jQuery / Reference / .removeClass()
개요 .removeClass()로 선택한 요소에서 클래스 값을 제거할 수 있습니다. 문법 .removeClass( className ) 클래스 값은 큰 따옴표 또는 작은 따옴표로 감쌉니다. $( 'h1' ).removeClass( 'abc' ); 띄어쓰기로 구분하여 여러 개의 값을 제거할 수 있습니다. $( 'h1' ).removeClass( 'ab cd ef' ); 페이지가 로드된 상태에서 클래스 값이 제거되는 것이므로, 제거되기 전의 모양에서 제거된 후의 모양으로 변하는 것을 방문자가 볼 수도 ...
jQuery / Reference / .appendTo()
개요 .appendTo()는 선택한 요소를 다른 요소의 종료 태그 앞으로 이동시킵니다. 문법 .appendTo( target ) 예제 abc를 클래스 값으로 가지는 span 요소를 h1 요소의 </h1> 앞으로 이동시킵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { ...