.net column
.NET開発者のためのブログメディア

jQueryでのremoveメソッドを使った要素の削除方法|コード付きで紹介

2021年01月29日

SE
removeメソッドで引数を削除してもデータは残るのでしょうか?

PM
引数を利用して削除対象を絞ることも可能です。

jQueryでのremoveメソッドの使い方とは?


今回は、jQueryでのremoveメソッドの使い方について説明します。
removeメソッドを使用すると、要素の削除ができます。
ここでは、
・指定の要素を削除
・id/class/name指定で削除
・containsで削除
・複数要素の一部のみ削除
・削除した要素の復活

jQueryでのremoveメソッドの使い方に興味のある方はぜひご覧ください。

指定の要素を削除

jQueryでの指定要素の削除方法を紹介します。

See the Pen
jquery_remove1
by kskumd (@kskumd)
on CodePen.

このように、jQueryで指定要素を削除できます。

id/class/name指定で削除

jQueryでの、id/class/name指定の削除方法を紹介します。

See the Pen
jquery_remove2
by kskumd (@kskumd)
on CodePen.

このように、jQueryでid/class/name指定で削除できます。

containsで削除

jQueryでの、containsを使った削除方法を紹介します。

See the Pen
jquery_remove3
by kskumd (@kskumd)
on CodePen.

複数要素の一部のみ削除

jQueryでの、複数要素の一部のみを削除する方法を紹介します。

See the Pen
jquery_remove5
by kskumd (@kskumd)
on CodePen.

「p:last」とすることで、p要素の最後を指定できます。
また「eq(1)」とすることで、2つめの要素を指定できます。

削除した要素の復活

jQueryでの、削除した要素の復活方法を紹介します。
削除した要素を変数に格納し、appendメソッドで復活させます。

See the Pen
jquery_remove4
by kskumd (@kskumd)
on CodePen.


SE
メソッドによっては削除した要素を復活することも可能なんですね。

PM
removeの他にも要素を削除するメソッドもありますので、ぜひ活用していきましょう。

まとめ

いかがでしたでしょうか。
jQueryでのremoveメソッドの使い方について説明しました。
removeメソッドを使用すると、要素の削除ができます。
ここでは、
・指定の要素を削除
・id/class/name指定で削除
・containsで削除
・複数要素の一部のみ削除
・削除した要素の復活
について紹介しました。

ぜひご自身でソースコードを書いて、理解を深めてください。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags