programming/JavaScript&jQuery

[jQuery&html] html 요소 지우기 .remove()

LeeBorn 2019. 11. 6. 00:00
반응형

기본 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
    <script src="./remove.js"></script>
</head>
<body>
    <div id="main">
        <button>test</button>
        <p class="test">p tag text test</p>
        <hr>
        <input type="text">
        <p>p 2nd text test</p>
        <hr>
        <button>code test</button>
    </div>
</body>
</html>
cs

 

1. remove()

Description: Remove the set of matched elements from the DOM.

remove()에 대한 jQuery에 올라와 있는 설명이다.

일치하는 요소들을 DOM에서 없애는 기능을 가지고 있다.

 

2. 사용법

1
2
3
4
5
6
7
8
$("#main").remove();  // div#main 없애기
 
$("button").remove(); // 모든 버튼 없애기
 
$("button").first().remove() // 첫번째 버튼만 없애기
 
$("div").remove("#main");    // div#main 없애기
 
cs

1. 아이디를 통해서 div를 없앨 수 있다.

2. 태그 이름을 통해서 없앨 수 있다.

3. first()를 통해 첫번째 태그만 없앨 수 있다.

4. 먼저 태그명을 쓰고 뒤에 아이디를 써도 해당 요소를 없앨 수 있다.

 

-참고

https://api.jquery.com/remove/

 

.remove() | jQuery API Documentation

Description: Remove the set of matched elements from the DOM. Similar to .empty(), the .remove() method takes elements out of the DOM. Use .remove() when you want to remove the element itself, as well as everything inside it. In addition to the elements th

api.jquery.com

-해당 소스

https://github.com/devdevdev09/htmlJsJquery/blob/master/example/jQuery/remove/remove.js

 

devdevdev09/htmlJsJquery

Contribute to devdevdev09/htmlJsJquery development by creating an account on GitHub.

github.com

반응형