Question

我需要一个事件，该事件将删除每个单击的项目，包括用户自己创建的项目。

我有一个“待办事项”列表，默认情况下包含4个项目。您可以在输入字段中输入您的“待办事项”。附注-现在我的脚本仅适用于现有项目

var input = document.getElementById("inpText");
var button = document.getElementById("button");
var ul = document.querySelector("ul");
var list = document.getElementsByTagName("li");

function inputLength() {
    return input.value.length;
}

function createNewListElement() {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(input.value));
    ul.appendChild(li);
    input.value = "";
}

function newElementCreation() {
    if (inputLength() > 0) {
        createNewListElement();
    }
}

function newElementCreationByEnter(event) {
    if (inputLength() > 0 && event.keyCode === 13) {
        createNewListElement();
    }
}

function ElementToggling () {
    this.classList.toggle("done");
}

    button.addEventListener("click", newElementCreation);
    input.addEventListener("keypress", newElementCreationByEnter);

for (var i=0; i<list.length; i++) {
   list[i].addEventListener("click", ElementToggling);
}

.done {
  text-decoration: line-through;
}

<html>

<head>
    <title>
        To do list
    </title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
    <h1>My to do list for today</h1>
    <input id="inpText" type="text" placeholder="enter the value">
    <button id="button">Add</button>
    <ul>
        <li>To brush my teeth</li>
        <li>To cover the bed</li>
        <li>To dress up</li>
        <li>To cook my breakfast</li>
    </ul>
</body>
<script type="text/javascript" src="myscript.js"></script>
</html>

Answer 1

您必须在新创建的 li 上附加 click 事件。

更新：添加了一个计数器变量来跟踪 li 总数。

var input = document.getElementById("inpText");
var button = document.getElementById("button");
var ul = document.querySelector("ul");
var list = document.getElementsByTagName("li");
var totalEl = list.length;
console.log('Total element:', totalEl);

function inputLength() {
    return input.value.length;
}

function createNewListElement() {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(input.value));
    ul.appendChild(li);
    input.value = "";
    li.addEventListener("click", ElementToggling); // attach the event here
    totalEl++; // Increment the count
    console.log('Total element:', totalEl);
}

function newElementCreation() {
    if (inputLength() > 0) {
        createNewListElement();
    }
}

function newElementCreationByEnter(event) {
    if (inputLength() > 0 && event.keyCode === 13) {
        createNewListElement();
    }
}

function ElementToggling () {
    this.classList.toggle("done");
}

    button.addEventListener("click", newElementCreation);
    input.addEventListener("keypress", newElementCreationByEnter);

for (let i=0; i<list.length; i++) {
   list[i].addEventListener("click", ElementToggling);
}

.done {
  text-decoration: line-through;
}

<h1>My to do list for today</h1>
<input id="inpText" type="text" placeholder="enter the value">
<button id="button">Add</button>
<ul>
    <li>To brush my teeth</li>
    <li>To cover the bed</li>
    <li>To dress up</li>
    <li>To cook my breakfast</li>
</ul>

将样式应用于购物清单中新创建的商品

1 个答案: