jQueryで要素を削除する方法のまとめ
jQueryで要素を削除する方法をまとめました。
１．自要素と配下の要素を削除する
自要素と配下の要素を削除するにはremove()を利用します。
次のサンプルでは自要素としてdivを指定し、その配下のp要素含めて削除します（赤色部分が削除対象）。
サンプル
<head>
<style>
div { border: 1px solid #000; }
</style>
<script src="//code.jquery.com/jquery-1.11.1.js"></script>
<script>
$(function(){
$('button').click(function() {
$('div').remove();
});
});
</script>
</head>
<body>
<div>
<p>abc</p>
</div>
<div>
<p>123</p>
</div>
<button>実行</button>
</body>実行後のbody要素
<body>
<button>実行</button>
</body>remove()はパラメータとして削除する条件を指定することができます。
２．子要素を削除する
子要素を削除する（空にする）にはempty()を利用します。
次のサンプルでは自要素としてdivを指定し、その配下（p要素）を空にします（赤色部分が削除対象）。
サンプル
<head>
<style>
div { border: 1px solid #000; }
</style>
<script src="//code.jquery.com/jquery-1.11.1.js"></script>
<script>
$(function(){
$('button').click(function() {
$('div').empty();
});
});
</script>
</head>
<body>
<div>
<p>abc</p>
</div>
<div>
<p>123</p>
</div>
<button>実行</button>
</body>実行後のbody要素
<body>
<div>
</div>
<div>
</div>
<button>実行</button>
</body>３．親要素を削除する
親要素を削除する（自要素は残す）にはunwrap()を利用します。
次のサンプルでは自要素としてpを指定し、その親要素divを削除します（赤色部分が削除対象）。
サンプル
<head>
<style>
div { border: 1px solid #000; }
</style>
<script src="//code.jquery.com/jquery-1.11.1.js"></script>
<script>
$(function(){
$('button').click(function() {
if ( $('p').parent().is('div') ) {
$('p').unwrap();
}
});
});
</script>
</head>
<body>
<div>
<p>abc</p>
</div>
<div>
<p>123</p>
</div>
<button>実行</button>
</body>実行後のbody要素
<body>
<p>abc</p>
<p>123</p>
<button>実行</button>
</body>４．自要素と配下の要素を削除しつつ、関連付けられているjQueryの情報は保持
自要素と配下の要素を削除しつつも、関連付けられているjQueryの情報を保持したい場合、detach()を利用します。
次のサンプルでは自要素としてdivを指定し、その配下のp要素含めて一旦削除し、appendで削除した要素をnutton要素の後方に追加します（赤色部分が削除対象）。
サンプル
<head>
<style>
div { border: 1px solid #000; }
</style>
<script src="//code.jquery.com/jquery-1.11.1.js"></script>
<script>
$(function(){
$('button').click(function() {
div = $('div').detach();
$('body').append(div);
});
});
</script>
</head>
<body>
<div>
<p>abc</p>
</div>
<div>
<p>123</p>
</div>
<button>実行</button>
</body>実行後のbody要素
<body>
<button>実行</button>
<div>
<p>abc</p>
</div>
<div>
<p>123</p>
</div>
</body>detach()もパラメータとして削除する条件を指定することができます。
Posted by yujiro このページの先頭に戻る
- jQuery+ajaxでモーダルのコンテンツを取得する方法
- jQueryでパスワードの表示・非表示を切り替えるサンプル
- jQueryでファイル選択時にプレビュー表示する方法
- ラジオボタンをjQueryで解除する方法
- テーブルのセルをポイントすると行と列を反転表示するjQueryプラグイン「Table Hover」
- jQueryで親ページからiframeのスクロールバーを非表示にする方法
- jQueryのカスタムビルドが簡単にできるサービス「jQuery Builder」
- jQueryでCSSをまとめて書き換える方法のまとめ
- 親ページからiframe内の要素にCSSを適用させる方法
- jQueryでテキストを追加するたびにスクロールさせる方法
- jQuery.ajax()でファイルをアップロードする方法
- preventDefault()で無効にしたイベントを有効にする方法
- jQueryで要素数を取得する方法のまとめ
- jQueryやJavaScriptでパスワードフィールドの文字を表示する方法
- jQueryでフォームデータを送信する方法のまとめ
トラックバックURL
コメントする
greeting
