カテゴリ:デジタル覚え書き > web関係 »

特定の要素を削除-javascript

いろいろ分からなかったり上手く行かなかったことをメモ。

  1. まず、「子」じゃねぇ

  2. 親が分からない要素の削除

  3. forで回すときは後ろから

  4. 脱線:chromeのデベロッパーツール


まず、「子」じゃねぇ


const child = element.getElementsBy~でHTMLCollectionを得るじゃん?
それをforで回してelement.removeChild(child)しようとするじゃん?
よくこうやってしかられる。
Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
「それこのノードの子供じゃないよ」って言われてんの。
htmlは例えばこんなふうになってる。

<div id="remove_test">
<div>
one↓<p>one</p>
two↓<p>two</p>
</div>
three↓<p><span>three</span></p>
four↓<p>four</p>
<blockquote>
five↓<p>five</p>
six↓<p>six</p>
</blockquote>
</div>



one↓

one

two↓

two


three↓

three

four↓

four


five↓

five

six↓

six




それをこうしようとしちゃう。

const par_d = document.getElementById('remove_test');
const p = par_d.getElementsByTagName('p');
for (let i = 0, l = p.length; i < l; i++) {
par_d.removeChild(p[i]);
}

まあ、そうだよ、そうなんだよね、全員が「子」ではないんだよ。
孫もいるからだよね。
一応、console.log(par_d.children);の結果は……
HTMLCollection(4) [div, p, p, blockquote]
直下の要素だけなんだよね、そうなんだよね。

親が分からない要素の削除


消したい要素自身の親にさかのぼって、removeChildする。
つまりchild.parentNode.removeChild(child);ってするんだね。
まあ、こうするじゃん?

const par_d = document.getElementById('remove_test');
const p = par_d.getElementsByTagName('p');
for (let i = 0, l = p.length; i < l; i++) {
p[i].parentNode.removeChild(p[i]);
}

結果。


one↓two↓

two


three↓four↓

four


five↓six↓

six




なんかいっこ置き……。
さらにこうやってしかられる。
Uncaught TypeError: Cannot read property 'parentNode' of undefined
「undefinedの'parentNode'プロパティは読めません」ときた。
「undefined」は「未定義」。
p[i]が何個目かで「未定義」になってる。
<p>要素の分しか回してないはずなのに……。
6個あるうち3個消えてるみたいだから、4回目でp[i]undefinedになってるんだ……。

forで回すときは後ろから


ネット上をさまよってたらこういう記事を見つけた。
JavaScriptのremoveChildを使う際の注意点 - 知らないことがあってもへっちゃらさ
こちらでおっしゃっている通り、頭から消しちゃだめだったんだ。
私のやり方だと、
p[0](one)を消す

p[0](one)が消えた結果、さっきまでp[1]だったやつ(two)が前にずれてp[0]になる

カウンターiが1進んで1になる

p[1]を消す命令が出る。今p[1]にはthreeが入ってるのでthreeが消える

p[1](three)が消えた結果、さっきまでp[2]だったやつ(four)が前にずれてp[1]になる

カウンターiが1進んで2になる

p[2]を消す命令が出る。今p[2]にはfiveが入ってるのでfiveが消える

p[2](five)が消えた結果、さっきまでp[3]だったやつ(six)が前にずれてp[2]になる

カウンターiが1進んで3になる

p[3]を消す命令が出るが、もうそこには誰もいない

しかられる

いっこ置きにしか消えてない

……そういうことだったんだね……。
なのでまずforの丸括弧の中でp.lengthを変数に代入するのをやめる。
まだ6個あるときにその長さを代入しちゃってたから、誰もいないところを参照しようとしてしかられてたんだ。
で、カウンタ変数を「0」から始めるんじゃなくてp.length-1から始めて減らしていく。

「-1」してるのは、配列の中身が10個だったとしたら、インデックスは「0」から「9」だから。
……ややこしいね……。って思うのは私だけでしょうか。
なのでこうなる。

for (let i = p.length-1; i >= 0; i--) {
p[i].parentNode.removeChild(p[i]);
}

結果。


one↓two↓

three↓four↓
five↓six↓



無事消えた。

脱線:chromeのデベロッパーツール


ほんと初心者で申し訳ないんだけど、デベロッパーツールの使い方もよく分かってない。
最近になって「検証」の存在に気づいた。
デベロッパーツールの「Elements」で目的の要素にたどり着くのが大変だな~って思ってたんだけど、目的の要素の上で右クリックして「検証」を選べばすぐそこを開いてくれるんだね。
なんか……よくできてんなぁ……。
で、「この要素のスタイル指定どうなってんだろう……?」って思ったとき、「Sources」タブでグルーピングオフにしてスタイルシート片っ端から見てたの。
バカだね私……。
下のウィンドウの「Styles」ペインで見られるんじゃん……。
cssファイルの名前も出てるし。
この「Styles」ペインの一番下にある箱のイメージ、これなんて言うの? ……ボックスパラメータ。これも便利ね。
あんまり数値数値でレイアウトするのよくないのかもしれないけど、ブログとか、自分でいまいち全体像を把握できてないとき、ここにきれいに収めるには幅このくらい、とか、画像はこの大きさまでにしよう、とか分かるもんね。
もっといろいろ便利な使い方があるんだろうなぁ。
便利って言うか、適切な?

ジャンル : コンピュータ
テーマ : JavaScript

コメントの投稿

非公開コメント

ステータス
細野ゆとり
あそびにん
せいべつおんな
レベル
ちから
すばやさ
こうげき力
しゅび力
EX
最新記事
カテゴリー
月別アーカイブ
全記事表示リンク

全ての記事を表示する

おえかき
ブログ内ページランキング
twitter
その他SNS
検索フォーム
オンラインカウンター
現在の閲覧者数:
カレンダー
05 | 2020/06 | 07
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 - - - -
リンク
カウンター
RSSリンクの表示
QRコード
QR