.remove()

http://api.jquery.com/remove/

マッチした要素を削除します。

.remove([ selector ]) 1.0追加
デモ

.empty()との違いは、.remove()はマッチしている自身の要素も含めて、子要素も全て削除します。また、削除対象の要素に紐付けられているDataやイベントもハンドラも削除します。もし、紐付けられているものを残しておきたい場合は、.detach()を使用してください。

.remove([ selector ]) 1.0追加

戻り値:jQuery

引数	説明
[selector]	マッチした要素を削除する際にフィルタリングするためのセレクタを指定します。

<div class="container">
  <div class="hello">こんにちは</div>
  <div class="goodbye">さようなら</div>
</div>

次のように削除処理を実行します。

$('.hello').remove();

結果は下記のように該当したDIV要素が削除されます。

<div class="container">
  <div class="goodbye">さようなら</div>
</div>

また、次のようにしても同じ結果になります。

$('div').remove('.hello');

デモ

全てのP要素を削除します。

<!DOCTYPE html>
<html>
<head>
<style>
  p { margin:2px; background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>こんにちは、</p>
調子は
<p>どうですか？</p>
<button>remove()でP要素内のコンテンツを削除します</button>
<script>
  $("button").click(function () {
    $("p").remove();
  });
</script>
</body>
</html>

フィルタリング処理で、"こんにちは"のテキストを含む要素を指定して削除を実行します。

<!DOCTYPE html>
<html>
<head>
<style>p { background:yellow; margin:6px 0; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p class="hello">こんにちは、</p>
調子は
<p>どうですか?</p>
<button>P要素に対して(":contains('こんにちは')")を実行</button>
<script>
  $("button").click(function () {
    $("p").remove(":contains('こんにちは')");
  });
</script>
</body>
</html>