javascript リストに削除ボタン付きの要素を追加して、削除ボタンを押したらそのリストを削除したい

ＴＯＤＯリストをイメージし、a,b,cという削除ボタンつきリストを動的に作る
![

bの削除ボタンを押すと見た目の上では、bが削除される。

dを追加しようと、addボタンを押す

見事にbが復活し、abcdのリストができてしまう。これをa,c,dのリストが出るようにしたいです。

なぜ、こうなるかを推測したのですが、
this.lists.push(new List());
として、this.listsにpushしているのですが、
削除するときは、このリストについては特に削除はせずに、
removeChildで要素を削除しているからだと考えています。
このような場合、どのようにすると、要素を削除し、さらに追加ができるのでしょうか？
ご教授ください。

javascript
1<!DOCTYPE html>
2<html lang = "ja">
3  <head>
4    <meta charset="utf-8">
5    <title>Thimble Sample</title>
6    <link rel="stylesheet" href="style.css">
7  </head>
8  <body>
9    <div class="container">
10
11      <div class="todo">
12        <input type='text' id="inputItem">
13        <button id="add_btn">add</button>
14      </div>
15      <ul id="list" class="list">     
16<!--
17        <li class="item">
18          <input type=text class="itemBox" value="">
19          <button class='del'>×</button>
20        </li>
21-->
22      </ul>
23
24    </div>
25    <button id="test">test</button>
26
27    <script>
28      const list_id = document.getElementById('list');
29      let del = document.querySelectorAll('.del')
30
31      //リスト全体を管理 
32      class Tasklist {
33        constructor() {
34          this.lists = [];   
35//          this.setup();    
36        }//constructor
37
38        setup(){ //ulにliを追加していく
39//          list_id.appendChild(this.lists.getli()) 
40          this.lists.forEach(index => {
41            list_id.appendChild(index.getli())
42          });     
43        }//setup
44
45        //ボタンを押して一行追加する
46        go() {
47          console.log('go')
48          this.lists.push(new List()); 
49          this.setup(); 
50          console.log(this.lists)
51        };//go    
52      } //Tasklist class
53    
54      //リストの一行を管理
55      class List {
56        constructor() {
57          //todoリスト
58          const inputItem = document.getElementById('inputItem');
59          this.li = document.createElement('li')
60          this.li.classList.add('item');
61
62          //テキストボックスの追加
63          const textbox = document.createElement('input')
64          textbox.classList.add('itemBox');
65          textbox.value = inputItem.value;
66          this.li.appendChild(textbox)
67      
68          //deleteボタンの追加
69          const deleteBtn =  document.createElement('button')
70          deleteBtn.classList.add('del');
71          deleteBtn.textContent = '×';
72          this.li.appendChild(deleteBtn);  
73    
74          //削除ボタンを押した時 
75          deleteBtn.addEventListener('click', ()=> {
76            console.log('delbtn');
77            list_id.removeChild(this.li);  
78          }) ;//deleteBtn.click    
79        }//constructor
80
81        getli(){
82          return this.li;
83        }//getli
84      }//List
85
86      const tasklist = new Tasklist();
87      add_btn.addEventListener('click', () =>{
88        tasklist.go();
89        const inputItem = document.getElementById('inputItem');
90        inputItem.value = '';
91        inputItem.focus();
92      });//add_btn;
93      
94    </script>
95  </body>
96</html>
97

行動規範の内容に同意します

回答1件

ベストアンサー

classの依存関係が微妙ですが

ListクラスのdeleteBtnのクリック処理をこうしてみては？

javascript
1    deleteBtn.addEventListener('click', ()=> {
2      console.log('delbtn');
3      var idx=[].indexOf.call(list_id.querySelectorAll('li'),this.li);  
4      tasklist.lists.splice(idx,1);
5      list_id.removeChild(this.li);  
6    });