前回に引き続き、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() メソッドはセレクタに指定をした要素が何番目にあるのかを知ることができます。
上の例では、ボタンを押すとスズキがリスト内で何番目にあるのかを表示するようにスクリプトを書いています。
結果に書かれていますが、プログラミング言語でこのように順番を取得するときにはゼロから始まることを覚えておきましょう。
なのでゼロのトヨタからスタートし、スズキは３番目ということですね。
