Question

request1：单击列表项，它将打开和关闭.done类。

request2：在每个列表项旁边添加按钮，以在单击按钮时删除该项目

request3：添加一个新列表项，它会自动在其旁边添加删除按钮。同时满足要求1和2

我想问的问题是我已经完成了请求1和2，正如标题所说：为什么我要添加新的按钮和列表项，而不会执行请求1和2

第一个代码是js，第二个代码是css，第三个代码是html。 request1需要使用称为.done
的CSS。在我的js中：

var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");
var span= document.getElementsByTagName("span");
var DeleteButton=document.getElementsByTagName("button");
/*Delete button */
[...document.getElementsByTagName('button')].forEach(el =>
  el.addEventListener('click', () =>
    el.parentNode.parentNode.removeChild(el.parentNode)));

/*toggle .done property*/
for(var i=0; i<span.length; i++){
   span[i].addEventListener("click", liClick);
}
function liClick(){
 this.classList.toggle("done");
}  


function inputLength() {
	return input.value.length;
}

function createListElement() {
	var li = document.createElement("li");
    var deletebutton = document.createElement("button")
    var spanitem = document.createElement("span")
	spanitem.appendChild(document.createTextNode(input.value));
    deletebutton.appendChild(document.createTextNode("Delete"));
	ul.appendChild(li);
    li.appendChild(spanitem)
    li.appendChild(deletebutton);
	input.value = "";
}

function addListAfterClick() {
	if (inputLength() > 0) {
		createListElement();
	}
}

function addListAfterKeypress(event) {
	if (inputLength() > 0 && event.keyCode === 13) {
		createListElement();
	}
}

button.addEventListener("click", addListAfterClick);

input.addEventListener("keypress", addListAfterKeypress);

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

<input id="userinput" type="text" placeholder="enter items">
	<button id="enter">Enter</button>
	<ul id="Delete">
        <li class="bold red" random="23">
            <span>Notebook</span>
            <button >Delete</button>
        </li>
        
		<li>
            <span>Jello</span>
            <button >Delete</button>
        </li>
        
		<li>
		    <span>Spinach</span>
            <button >Delete</button>
        </li>
        
		<li>
            <span>Rice</span>
            <button >Delete</button>
        </li>
        
		<li>
		     <span>Birthday Cake</span>
		     <button >Delete</button>
		  
        </li>
        
		<li>
		      <span>Candles</span>
		      <button>Delete</button>
        </li>
        
	</ul>
	<script type="text/javascript" src="script.js"></script>

Answer 1

更新的JS：

var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.getElementById("Delete");
var span= document.getElementsByTagName("span");
var DeleteButton=document.getElementsByTagName("button");
/*Delete button */
[...document.querySelectorAll('.del')].forEach(el =>
  el.addEventListener('click', () =>
    el.parentNode.parentNode.removeChild(el.parentNode)));

/*toggle .done property*/
for(var i=0; i<span.length; i++){
   span[i].addEventListener("click", liClick);
}
function liClick(){
 this.classList.toggle("done");
}  


function inputLength() {
    return input.value.length;
}

function createListElement() {
    var li = document.createElement("li");
    li.addEventListener('click', () => {
        li.classList.toggle("done");
    })
    var deletebutton = document.createElement("button")
    var spanitem = document.createElement("span")
    spanitem.appendChild(document.createTextNode(input.value));
    deletebutton.appendChild(document.createTextNode("Delete"));
    deletebutton.addEventListener('click', () => {
        ul.removeChild(li);
    });
    ul.appendChild(li);
    li.appendChild(spanitem)
    li.appendChild(deletebutton);
    input.value = "";

}

function addListAfterClick() {
    if (inputLength() > 0) {
        createListElement();
    }
}

function addListAfterKeypress(event) {
    if (inputLength() > 0 && event.keyCode === 13) {
        createListElement();
    }
}

button.addEventListener("click", addListAfterClick);

input.addEventListener("keypress", addListAfterKeypress);

并在所有按钮元素中添加“ del”类

为什么我要添加新按钮并列出内容，它不会请求1和2？

1 个答案: