今回は初歩の初歩jQueryで要素を削除する.remove()ちゃんのお話。
- .remove( [セレクタ] )
- 子要素も含め、指定した要素を削除する
.remove()
指定した要素を子要素・イベント・ハンドラごと削除します。
変数を使って戻すこともできますが、イベントやハンドラは削除されたまま戻りません。
子要素もしくは内容のみを削除したい場合は.empty()。
イベントやハンドラを残しておきたい場合は.detach()。
をそれぞれ使いましょう。
下記のulを.remove();を使って色々な方法で削除していきます。
|
1 2 3 4 5 6 |
<ul id="hoge"> <li class="hoge-1">リプサム [hoge-1]</li> <li class="hoge-2">リプサム [hoge-2]</li> <li class="hoge-3">NoText [hoge-3]</li> <li class="hoge-4">NoText [hoge-4]t</li> </ul> |
ul#hogeをliごと削除。
|
1 2 3 |
jQuery(function($){ $('#hoge').remove(); }); |
ulを残してliを全て削除。
|
1 2 3 |
jQuery(function($){ $('#hoge li').remove(); }); |
li.hoge-1を削除。
|
1 2 3 |
jQuery(function($){ $('#hoge li.hoge-1').remove(); }); |
フィルタリング処理
フィルタリング処理を使えば、削除対象を指定した要素からさらに絞り込めます。
|
1 2 3 4 5 6 |
<ul id="hoge"> <li class="hoge-1">リプサム [hoge-1]</li> <li class="hoge-2">リプサム [hoge-2]</li> <li class="hoge-3">NoText [hoge-3]</li> <li class="hoge-4">NoText [hoge-4]t</li> </ul> |
class属性で絞り込んでli.hoge-01を削除。
|
1 2 3 |
jQuery(function($){ $('#hoge li').remove('.hoge-1'); }); |
(‘:contains(“”)’)を使ってテキストで絞り込んで削除。
シングルクォーテーションとダブルクォーテーションに気をつけてください。
|
1 2 3 |
jQuery(function($){ $('#hoge li').remove(':contains("リプサム")') }); |
これでリプサムと書かれているliのみを削除できます。
See the Pen remove by sorry (@eitch) on CodePen.
.remove()した要素を元に戻す
変数を使って要素を消した後に.appendto()で元に戻すこともできます。
|
1 2 3 4 |
jQuery(function($){ var removeObj = $('li.hoge-1').remove(); removeObj.appendTo('ul'); }); |
これでli.hoge-1が削除されてulの1番下に追加されます。
このままでは並びが.hoge-2、.hoge-3、.hoge-4、.hoge-1になりますが、.after()や.before()を使って元の位置にもってくることも出来ます。
また.click()などのイベントを使って.appendTo()すことも出来ます。
|
1 2 3 4 5 6 |
jQuery(function($){ var removeObj = $('li.hoge-1').remove(); $('li.hoge-2').click(function(){ removeObj.appendTo('ul'); }); }); |
これで [hoge-2]をクリックすると.appendTo()が実行されてli.hoge-1がul内に戻ります。
See the Pen VvEPEq by sorry (@eitch) on CodePen.
.remove()はこういう使い方もできますが、イベントやハンドラは削除されたままなので元に戻すことを考えると.detach()を使った方がいいでしょう。
一時的な処置としてイベントやハンドラを削除したい時には使えそうですね。