Javascript　To Do リスト　の項目の削除について

javascriptでtodo listを作っています。
消去ボタンを押したら項目を削除したいのですがうまく行かず困っています。
もう二日もこの問題が解決できなくて心が折れそうです。

初心者で恐縮ですがわかるかたがいたらお願いいたします。

html
1
2<body>
3	<h1>Shopping List</h1>
4	<p id="first">Get it done today</p>
5	<input id="userinput" type="text" placeholder="enter items">
6	<button id="enter">Enter</button>
7	<ul>
8		<li class="bold red" random="23">Notebook 	<button class="del">delete</button></li>
9		<li>Jello 	<button class="del">delete</button></li>
10		<li>Spinach 	<button class="del">delete</button></li>
11		<li>Rice 	<button class="del">delete</button></li>
12		<li>Birthday Cake 	<button class="del">delete</button></li>
13		<li>Candles 	<button class="del">delete</button></li>
14		
15	</ul>
16
17	<script type="text/javascript" src="script.js"></script>
18</body>
19</html>

js
1
2var button = document.getElementById("enter");
3var input = document.getElementById("userinput");
4var ul = document.querySelector("ul");
5
6function inputLength() {
7	return input.value.length;
8}
9
10function createListElement() {
11	var li = document.createElement("li");
12	li.appendChild(document.createTextNode(input.value));
13	ul.appendChild(li);
14	input.value = ""; 
15}
16
17function addListAfterClick() {
18	if (inputLength() > 0) {
19		createListElement();
20	}
21}
22
23function addListAfterKeypress(event) {
24	if (inputLength() > 0 && event.keyCode === 13) {
25		createListElement();
26	}
27}
28
29button.addEventListener("click", addListAfterClick);
30
31input.addEventListener("keypress", addListAfterKeypress);
32
33//ここから不明//
34var delB = document.getElementsByClassName("del")//⇦ボタンを取得//
35
36 delB.addEventListener(click',delItem);//⇦ボタンを押したら消去する//
37
38 function removeParent(e){　//⇦消去するファンクション//
39	e.target.parentNode.remove();
40} 
41 delB.addEventListener("click",removeParent);//⇦実行//

kei344

2020/03/25 13:51

「//ここから不明//」にあるコードはエラーが出るような位置にコメントがありますが、実際のコードでもそうなっているのでしょうか。

退会済みユーザー

2020/03/25 14:05

返信ありがとうございます。矢印のコメントはこちらで質問をするために付け加えました。 VSコードの方には書いておりません。必要な部分はコメントアウトで書いています。

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

回答2件

ベストアンサー

javascript
1//script.js
2var button = document.getElementById("enter");
3var input = document.getElementById("userinput");
4var ul = document.querySelector("ul");
5
6function inputLength() {
7  return input.value.length;
8}
9
10function createListElement() {
11  var li = document.createElement("li");
12  li.appendChild(document.createTextNode(input.value));
13  ul.appendChild(li);
14  input.value = "";
15}
16
17function addListAfterClick() {
18  if (inputLength() > 0) {
19    createListElement();
20  }
21}
22
23function addListAfterKeypress(event) {
24  if (inputLength() > 0 && event.keyCode === 13) {
25    createListElement();
26  }
27}
28
29button.addEventListener("click", addListAfterClick);
30
31input.addEventListener("keypress", addListAfterKeypress);
32
33//ここから不明//
34var delB = document.getElementsByClassName("del");
35
36//delB.addEventListener("click", delItem);
37
38function removeParent(e) {
39  e.target.parentNode.remove();
40}
41[...delB].forEach(e => e.addEventListener("click", removeParent));
42