jqueryでdiv要素を削除するクリックイベントを設定する方法-フロントエンドQ&A-php.cn

jqueryでdiv要素を削除するクリックイベントを設定する方法

青灯夜游

リリース： 2022-04-22 15:31:02

オリジナル

2416 人が閲覧しました

削除方法: 1. "$("button").click(function(){...});" ステートメントを使用して、クリックイベントをボタン要素にバインドし、イベント処理関数を設定します。 ; 2 . 処理関数で、「$("div").remove();」ステートメントを使用して、div 要素とその内部のすべてのコンテンツを削除します。

jqueryでdiv要素を削除するクリックイベントを設定する方法

このチュートリアルの動作環境: Windows7 システム、jquery1.10.2 バージョン、Dell G3 コンピューター。

jquery は、div 要素を削除するためにクリックイベントを設定します。

実装アイデア:

Use click( ) button 要素に click イベントをバインドし、イベント処理関数を設定します。
#処理関数では、remove() を使用して div 要素を削除します。
remove()すべてのテキストと子ノードを含む選択要素を削除できます。

#remove() メソッドは、要素を「完全に」削除するために使用されます。いわゆる「完全」とは、要素が削除されるだけでなく、その要素にバインドされているイベントも削除されることを意味します;

実装例:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("div").remove();
				});
			});
		</script>
			
		<style>
			div{
				color: red;
			}
		</style>
	</head>
	<body>
		
		<div>这是一个div段落。</div>
		<span>一个span元素</span>
		<div>这是另一个div段落。</div>
		<p>这是一个p段落。</p>
		<button>点击按钮，移除div元素</button>

	</body>
</html>

ログイン後にコピー

jqueryでdiv要素を削除するクリックイベントを設定する方法