【jQuery-11】remove(),index() を使ってみる【初心者向き】

2021/12/16

PC全般

t f B! P L


前回に引き続き、HTML関連のメソッドの紹介です。

指定した要素を削除する remove() と、指定したセレクタが同一階層で何番目にあるのかを知るためのメソッド index() を説明していきます。

※エディターは自由に編集できます。いろいろ試してみましょう!

【remove()】要素を削除する

See the Pen Untitled by taichi (@taichi_na) on CodePen.


上の例では、remove() メソッドを使って <ul> 内の最初の <li> 要素を削除しています。

引数内に対象を書くのではなく、最初のセレクタに消したい要素を指定し、後に続くカッコ内は空にします。

消したい要素として、li:first-child という疑似要素を指定しています。これは連続する<li>の最初のものという意味ですね。

※ここでは動作をわかりやすくするために、いつものようにボタンを押したら動作をするようにしています。

【index()】指定したセレクタが何番目にあるかを取得する

See the Pen index() by taichi (@taichi_na) on CodePen.

index() メソッドはセレクタに指定をした要素が何番目にあるのかを知ることができます。
上の例では、ボタンを押すとスズキがリスト内で何番目にあるのかを表示するようにスクリプトを書いています。

結果に書かれていますが、プログラミング言語でこのように順番を取得するときにはゼロから始まることを覚えておきましょう。

なのでゼロのトヨタからスタートし、スズキは3番目ということですね。


1981年生まれ。北海道在住。現在無職でアルバイトをしながらプログラミングを勉強中。木工を長らくしていたのでそちらの知識と技能はあります。ミニマリスト/ヴィーガン/アフリカに4年

カテゴリー別に記事を探す

このブログを検索

Contact

名前

メール *

メッセージ *

QooQ

TOP