>웹 프론트엔드 >JS 튜토리얼 >jQuery는 li 노드를 삭제하는 방법을 구현합니다.

jQuery는 li 노드를 삭제하는 방법을 구현합니다.

高洛峰
高洛峰원래의
2016-12-28 10:19:361275검색

더 이상 헛소리하지 마시고, 구체적인 코드는 다음과 같습니다.

<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul {
list-style: none;
}
li {
line-height: 25px;
margin-top: 3px;
}
li:hover {
background-color: #ddd;
}
li.hover {
background-color: #fc0;
}
</style>
<script src="./jquery-2.2.4.min.js"></script>
<script type="text/javascript">
$(function() {
//获取每一个li节点并设置点击事件
$("li").click(function() {
//当点击某一个节点的时候,增加类名为hover
$(this).toggleClass("hover");
});
//获取删除按钮并设置点击事件
$("button").click(function() {
//将类名是hover的节点删除
$("li.hover").remove();
});
});
</script>
</head>
<body>
<h2 id="hid">jQuery实例--节点删除</h2>
<ul>
<li>asdfasdfasfd</li>
<li>asdfasdfasfd</li>
<li>asdfasdfasfd</li>
<li>asdfasdfasfd</li>
<li>asdfasdfasfd</li>
<li>asdfasdfasfd</li>
</ul>
<button>删除</button>
</body>
</html>

jQuery는 li 노드를 삭제하는 방법을 구현합니다.

위는 편집자가 소개한 내용입니다. jQuery는 li 노드를 삭제하는 방법을 구현합니다. 질문이 있는 경우 메시지를 남겨주시면 편집자가 시간에 맞춰 답변해 드리겠습니다. 또한 PHP 중국어 웹사이트를 지원해 주신 모든 분들께 감사드립니다!

li 노드 삭제 방법에 대한 jQuery 관련 기사를 더 보려면 PHP 중국어 웹사이트를 주목하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.