Question

在我的html中，单击＆＃34; - ＆＃34;后，只能删除前4个元素。按钮，在文本框中输入后添加到列表中的元素，然后单击添加确实有＆＃34; - ＆＃34;单击＆＃34; - ＆＃34;后按钮但无法删除按钮

通过单击各自的按钮，只能删除带有按钮的4个预设条目。我的额外参赛作品不能。可以做些什么？如何使选择器或最后一个函数动态适应我要添加的元素？感谢

＆＃13;

var button1 = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");
var ul1 = document.getElementById("selection");
var ali = document.querySelectorAll("li");
var button2 = document.getElementsByClassName("del");

//var test = document.getElementById("deleteItem")


function inputLength(){
	return input.value.length;
}

// function createListElement(){
// 	var li = document.createElement("li"); //creates 															
// 	var del = document.createElement("del");
// 		li.appendChild(document.createTextNode(input.value)); //adds what you have written (input.value) 
// 		del.appendChild(document.createElement(button)); //adds a button
// 		ul.appendChild(li); //adds a new <li></li> to the ul
// 		input.value= '';																						
// }
function createListElement(){
	var li = document.createElement("li"); //creates 															
	//	var button = document.createElement("button");
	//	button.innerHTML = "-";
	//	li.appendchild(button);
	li.appendChild(document.createTextNode(input.value)); //adds what you have written (input.value) 
	var button = document.createElement("button");
	button.setAttribute("id", "deleteItem");
	button.setAttribute("class", "del");
	button.innerHTML = "-";
	li.appendChild(button);
	ul.appendChild(li); //adds a new <li></li> to the ul
	input.value='';																						
}


function addListAfterClick(){
	if (inputLength()>0){
		createListElement();
	}
}

function addListAfterKeypress(event){
	if (inputLength()>0 && event.keyCode === 13){
		createListElement();
	}
}


button1.addEventListener("click", addListAfterClick);

input.addEventListener("keypress", addListAfterKeypress);

//1. If you click on the list item, it toggles the .done class on and off.
for (var i=0; i<ali.length; i++) {
		ali[i].addEventListener('click', doneOnClick);
	}

	function doneOnClick() {
		this.classList.toggle( 'done' );
	}

//2. Add buttons next to each list item to delete the item when
//   clicked on its corresponding delete button

 for (var i=0; i<button2.length; i++)
	{
		button2[i].addEventListener("click", delet);
	}

	function delet(){
		this.closest("li").remove();
	}


//3. BONUS: When adding a new list item, it automatically adds the delete button next to it. 

// var ul = document.getElementById("selection");
// var li = document.createElement("li");
// li.appendChild(document.createTextNode(input.value));
// var button = document.createElement("button");
// button.innerHTML = "-";
// li.appendChild(button);
// li.setAttribute("id","element4");
// ul.appendChild(li);
// //alert(li.id);

＆＃13;

.coolTitle {
  text-align: center;
  font-family: 'Oswald', Helvetica, sans-serif;
  font-size: 80px;
  transform: skewY(-10deg);
  letter-spacing: 4px;
  word-spacing: -8px;
  color: tomato;
  text-shadow: 
    -1px -1px 0 firebrick,
    -2px -2px 0 firebrick,
    -3px -3px 0 firebrick,
    -4px -4px 0 firebrick,
    -5px -5px 0 firebrick,
    -6px -6px 0 firebrick,
    -7px -7px 0 firebrick,
    -8px -8px 0 firebrick,
    -30px 20px 40px dimgrey
}

.done {
  text-decoration: line-through;
}

.deleteItem{
  float: left;
  padding: 0px 2px;
  background: red;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title>Javascript w DOM</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>List</h1>
	<p id="onangona">test</p>
	<input id="userinput" type="text" placeholder="Enter items">
	<button id="enter">Add</button>
	<ul id = "selection">
		<li class = "bold red" random="24">A<button id ='deleteItem' class = "del">-</button>
		</li>
		<li>B<button id ='deleteItem' class = "del">-</button>
		</li>
		<li>C<button id ='deleteItem' class = "del">-</button>
		</li>
		<li>D<button id ='deleteItem' class = "del">-</button>
		</li>
	</ul>
	<script type="text/javascript" src="script.js"></script>

</body>

</html>

＆＃13;

Answer 1

首先创建可删除元素，然后在不添加按钮的情况下添加。这是一个工作示例

＆＃13;

document.addEventListener('DOMContentLoaded' , function(){
	create();
});

const selection = document.getElementById('selection');
const input = document.getElementById('userinput');

function create(){
    //Create default deletable values
	for(var i = 0 ; i < 4; i++){
		const li = document.createElement('li');
		li.innerHTML = 'Default-' + i
		const button = document.createElement('button');
		button.innerHTML = '-';
		addListener(button, li);
		li.appendChild(button);
		selection.appendChild(li);
	}	
}

enter.addEventListener('click', function() {
  const li = document.createElement('li');
  li.innerHTML = userinput.value;
  li.className = 'inline';
  input.value = '';
  selection.appendChild(li);
});

function addListener(button, li) {
  button.addEventListener('click', function() {
    li.remove();
    button.remove();
  });
}

＆＃13;

<input id="userinput" type="text" placeholder="Enter items">
<button id="enter">Add</button>
<ul id="selection">
</ul>

＆＃13;

Answer 2

回答@Ahmad

您是否尝试在createElement（）中绑定事件addListener？

我做了，它现在运作顺利。感谢

纯Javascript动态选择器

2 个答案: