動的なチェックリストを、選択的に削除したい。

やりたいこと

ToDoアプリ作成の一環で、ユーザータイトルを入力し追加ボタンを押すと、チェックリストを作成できる機能を実装しました。
作成した動的なチェックリストにそれぞれ削除ボタンがあるのですが、削除ボタンを押したら
該当するチェックリストのみを削除したい。

ソースコード

HTML
1<div id="checklist-area"> 
2　<div class="form-group" id="checklist-wrap">
3　　<input type="checkbox" id="">
4　　<input type="text" id="checklist" name="checklist[]">
5　　<input type="button" id="remove-btn" value="削除">
6　</div>
7　<div class="form-group" id="checklist-wrap">
8　　<input type="checkbox" id="">
9　　<input type="text" id="checklist" name="checklist[]">
10　　<input type="button" id="remove-btn" value="削除"><
11　/div>
12....

つまづいている部分

１、削除ボタンを押したときに、どのように削除する対象のチェックリストを区別するのか
２、htmlを読み込んだ時点ではチェックリストは作られていないので、削除ボタンにクリックイベントすると要素がnullなのでエラーになる。

最後に

これは要望になるのですが、できれば直接的に実現できる完成形のコードではなく、実現する上で調べる必要があるキーワード・学習すべき項目のヒントをいただければと思います。それを糸口に自分でコードを組んでいきたいと考えております。何卒ご教示のほどよろしくお願いします。

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

回答1件

ベストアンサー

同じページ内で同じidを複数HTML要素に設定してはいけません
仮にclassで代用するとして

javascript
1<script>
2document.addEventListener('click', e=>{
3  const t=e.target;
4  if(t.closest('.remove-btn')){
5    t.closest('.form-group').remove();
6  }
7});
8</script>
9<div id="checklist-area"> 
10　<div class="form-group">
11　　<input type="checkbox">
12　　<input type="text" class="checklist" name="checklist[]">
13　　<input type="button" class="remove-btn" value="削除">
14　</div>
15　<div class="form-group">
16　　<input type="checkbox">
17　　<input type="text" class="checklist" name="checklist[]">
18　　<input type="button" class="remove-btn" value="削除">
19　</div>
20　<div class="form-group">
21　　<input type="checkbox">
22　　<input type="text" class="checklist" name="checklist[]">
23　　<input type="button" class="remove-btn" value="削除">
24　</div>
25</div>