jQuery의 Remove() method_jquery에 대한 자세한 설명-JS 튜토리얼-php.cn

jQuery의 Remove() method_jquery에 대한 자세한 설명

WBOY

풀어 주다： 2016-05-16 15:46:01

원래의

1560명이 탐색했습니다.

remove() 메소드 정의 및 사용법:

이 방법은 DOM에서 일치하는 모든 요소를 제거합니다.

참고: Remove() 메소드는 jQuery 객체에서 일치하는 요소를 삭제하지 않으므로 이러한 일치 요소는 나중에 다시 사용할 수 있습니다. 그러나 요소 자체가 유지되는 것 외에도 바인딩된 이벤트와 같은 다른 이벤트도 있습니다. , 추가 데이터 등이 제거됩니다.

문법 구조:

$(selector).remove(expr)

로그인 후 복사

매개변수 목록:

매개변수 설명
expr은 선택사항입니다. 요소 필터링을 위한 jQuery 표현식

예제 코드:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
 $("button").click(function(){
  $("div").remove("#first");
 })
})
</script> 
</head>
<body>
<div id="first">我是第一</div>
<div id="second">我是第二</div>
<button>点击</button>
</body>
</html>

로그인 후 복사

다음 코드는 div 컬렉션에서 id가 먼저 있는 div를 삭제할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
 $("#btd").click(function(){
  $("div").remove();
 })
})
</script> 
</head>
<body>
<div id="first">我是第一</div>
<div id="second">我是第二</div>
<button id="btd">点击删除第一个div</button>
</body>
</html>

로그인 후 복사

매개변수를 생략하면 일치하는 모든 요소가 삭제됩니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div{
 width:200px;
 height:200px;
 border:5px solid green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
 $("#btd").click(function(){
  var a=$("div");
  a.remove("#first");
  $("#btn").click(function(){
   alert(a.length);
  })
 })
})
</script> 
</head>
<body>
<div id="first">我是第一</div>
<div id="second">我是第二</div>
<button id="btd">删除第一个div</button><button id="btn">查看删除操作后div的数量</button>
</body>
</html>

로그인 후 복사

remove()가 DOM에서 일치하는 요소를 제거했지만 jquery 객체에서는 제거하지 않았습니다.

jquery는 제거() 메서드를 사용하여 지정된 클래스의 하위 요소를 삭제합니다

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
 $("button").click(function(){
 $("p").remove(".italic");
 });
});
</script>
</head>
<body>
<p>This is a paragraph in the div.</p>
<p class="italic"><i>This is another paragraph in the div.</i></p>
<p class="italic"><i>This is another paragraph in the div.</i></p>
<button>Remove all p elements with class="italic"</button>
</body>
</html>

로그인 후 복사

이 코드를 보니 너무 길게 설명할 필요는 없을 것 같습니다. 다들 이해하실 거에요. 아주 흥미로운 방법이거든요.