Q&A
whileで書いたバージョンを載せてくれたら動かない理由を確認出来るかもしれません。それが良い書き方かどうかはおいておき。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <ul> <li>0<button>Delete</button></li> <li>1<button>Delete</button></li> <li>2<button>Delete</button></li> <li>3<button>Delete</button></li> </ul> <script> const $li = document.querySelectorAll('li'); const $button = document.querySelectorAll('button'); $button[0].addEventListener('click', () => { $li[0].remove(); }); $button[1].addEventListener('click', () => { $li[1].remove(); }); $button[2].addEventListener('click', () => { $li[2].remove(); }); $button[3].addEventListener('click', () => { $li[3].remove(); }); </script> </body> </html>
このコードをリファクタリングしたいです、while文も考えましたができません。どのように書けますか？
<script> let index = 0; const $li = document.querySelectorAll('li'); const $button = document.querySelectorAll('button'); while (index < $li.length) { $button[index].addEventListener('click', () => { $li[index].remove(); }); index++; } </script>
上記の書き方だと発火したとき、$li[4].remove();が読み込まれると思うのでできません。
回答1件
0
ベストアンサー
javascript
1document.querySelectorAll('button').forEach(x=>{ 2 x.addEventListener('click',()=>{ 3 x.closest('li').remove(); 4 }); 5});
投稿2020/11/15 07:21
総合スコア116835
あなたの回答
tips
プレビュー
