Q&A
質問失礼いたします。質問内容はjsでのtodoリスト作成における削除機能の部分のエラーの解決方法と原因についてです。
自分が実装した内容は、削除ボタンを押す→押した削除ボタンの列が消える。といったものです。1個だけtodoを登録して削除するのは問題ないのですが、2つ以上todoを登録したときに、一応削除はできるのですがエラーが出てくるといった状況で、調べても解決手段はなかったです。
このエラー原因と解決方法についてご教授いただければ幸いです。初歩的な質問で大変恐縮ではございますが、よろしくお願いいたします。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <link rel="stylesheet" href="css/style.css"> 8 <title>Document</title> 9</head> 10<body> 11 12 13 <div id="container"> 14 <div class="content"> 15 <table class="table"> 16 <tr> 17 <th>日付</th> 18 <th>やること</th> 19 <th>優先度</th> 20 <th>削除</th> 21 </tr> 22 </table> 23 24 <div class="tipe-space"> 25 <input type="text" id="input"> 26 <button id="btn">登録</button> 27 </div> 28 </div> 29 </div> 30 31 <script src="js/main.js"></script> 32</body> 33</html>
javascript
1let input = document.querySelector("#input"); 2let btn = document.querySelector("#btn"); 3let table = document.querySelector(".table"); 4let del = "削除"; 5let arry = []; 6const time = new Date(); 7 8 9document.addEventListener("DOMContentLoaded", function(){ 10 btn.addEventListener("click", addToDo); 11}); 12 13function addToDo(){ 14 let inputValue = input.value; 15 let obj = {}; 16 obj.time = time.toLocaleString(); 17 obj.content = inputValue; 18 obj.priority = 3; 19 arry.push(obj); 20 insetHtml(obj); 21} 22 23function insetHtml(obj){ 24 let insertContent = ""; 25 insertContent = `<tr><td>${obj.time}</td><td>${obj.content}</td><td>${obj.priority}</td><td><button class="delBtn">${del}</button></td></tr>` 26 table.insertAdjacentHTML("beforeend", insertContent); 27 input.value = ""; 28 let delBtn = document.querySelectorAll(".delBtn"); 29 delBtn.forEach(btns =>{ 30 btns.addEventListener("click", (e) => delTodo(e)); 31 }); 32 console.log(arry); 33} 34 35function delTodo(e){ 36 table.removeChild(e.target.closest("tbody")); 37}
javascript
1Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
回答1件
0
列が既に1つある状態で insetHtml() が呼ばれると、
- 列を1つ追加する
class=delBtnを持つ要素すべてにclickイベントリスナを追加する
ということで、既にあった列のボタンには同じ内容のイベントリスナが2つ付きます。
改善策1:
insetHtml()では最後のボタンにだけイベントリスナを追加しましょう。
js
1 delBtn[delBtn.length - 1].addEventListener("click", delTodo);
改善策2:
動的にイベントリスナを設定するのはやめて、documentにイベントリスナを足しましょう。
js
1document.addEventListener('click', e => { 2 if (e.closest(".delBtn")) { 3 delTodo(e); 4 } 5}); 6// insetHtml() 内の querySelectorAll()の行以降は削除
あと、delTodo() の中で消すのは tbody ではなく tr では。
投稿2022/01/25 15:47
総合スコア20845
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。