Qiita Engineer Festa20242024年7月17日まで開催中！

JavaScriptでN番目の子要素を削除するにはchildrenを使う

Posted at 2024-07-13

はじめに

JavaScriptで、appendChildを使ってN番目の子要素を削除する方法について。

結論、『親要素のchildrenプロパティで子要素のDOMを取得』 すればOK。

解決方法

単純に1つの子要素を削除する場合。

const delIndex = N; // Nは0以上の整数

const parentNode = document.getElementById('parent');
const delChildNode = parentNode.children[delIndex];

parentNode.removeChild(delChildNode);

拡張

複数の子要素を削除する場合は、こんな感じで使うのも可。

const indexArr = [...]; // 0以上の整数N
indexArr.sort((a,b) => b - a);

const parentNode = document.getElementById('parent');
indexArr.map(i => {
  if (parentNode.children.length > i) {
    const delChildNode = parentNode.children[i];
    parentNode.removeChild(delChildNode);
  }
});

参考

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

@ta-hiro

RSS

JavaScript's like ranking last week

お題は不問！Qiita Engineer Festa 2024で記事投稿！

@rana_kualu

2024-07-01

【JavaScript】ネイティブで集合演算できるようになった

@hiroikuin株式会社TeN

2024-06-24

polyfill.ioを使うのは危険かもしれない(危険だった)

@suin(suin@TypeScriptが好き)inCraftsman Software

2012-12-26

【まとめ】これ知らないプログラマって損してんなって思う汎用的なツール 100超

@Sicut_study(渡邉臣 | JISOU)

2023-10-05

【永久保存版】0からReactを勉強するならこのロードマップに従え！

@non_cal

2020-10-15

Node.jsとはなにか？なぜみんな使っているのか？

See more JavaScript articles

Comments

@oswe99489

2024-07-13 21:33

結論、『親要素のchildrenプロパティで子要素のDOMを取得』すればOK。

削除したい要素自体をremove()メソッドで直接削除する方法もあります。

sample.html

<div id='parent'>
  <div>子要素1</div>
  <div>子要素2</div>
  <div>子要素3</div>
  <div>子要素4</div>
  <div>子要素5</div>
</div>

<button id='btn'>2番目の子要素を削除</button>

<script>
btn.addEventListener('click', () => {
  document.querySelector('#parent div:nth-child(2)')?.remove();
});
</script>

Let's comment your feelings that are more than good

Being held Article posting campaign

生成AIに関する記事を書こう！

2024/06/10~2024/07/17

View details

自分が考える最高のエンジニアライフプランについて紹介しよう