Question

如何通过点击来正确删除列表项？

我一直在使用以下代码来删除项目，但这会删除整个列表本身：

var list = document.getElementById("shoppinglist");  

list.onclick = function() { list.parentNode.removeChild(list);}

我一直在网上搜索如何做到这一点，同样的代码不断出现，我不知道如何解决这个问题。我假设生成的列表项是＆＃34; shoppinglist＆＃34;。

的子项

我对Javascript很新，我知道这是一个新手的错误，但我真的很感激任何帮助。谢谢。

＆＃13;

<!doctype html>
<html dir="ltr" lang="en-gb">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
body { 
	/* Sets the width then uses the margin auto feature to centre the page in the browser */
	width:800px;
	margin: 0px auto; /*0px top/bottom auto left/right */
	font-size:10px; /* By default fonts are usually 16px but may not be in some browsers */
}
p, li {
	font-size:1.5em; /* Set all text to be 1.5 * overall font size = 15 pixels */
}
section {
	/* each of the two sections will use just under half the width of the width of the body */
	width:395px;
	display:block;
}
#choices {
	/* float the choices list to the left of the page */
	float:left;
	background-color: #FFFF99; 
}
#cart {
	/* float the shopping cart to the right of the page */
	float:right;
	background-color: #7FFF00; 
}
.cartlist {
	/* Simplify the display of the lists, removing default bullet points and indentation */
	list-style-type:none;
	margin:0px;
	padding:0px;
	width:inherit;
}
.cartlist li {
	/* Set each list item to be 2* the height of the text */
	height:2em;
}
.cartlist li:nth-child(odd) {
	/* Colour odd list items ie first, third, fifth etc, a different colour */
	background-color:#eee;
}
#outputinfo {
	/* prevents the DIV from joining the floating behaviour so it displays below the lists */
	clear:both;
}
</style>
</head>
<body>
<section id="choices">
	<p>Available Choices</p>
	<ul id="sourcelist" class="cartlist">
		<li data-value="2.99">&pound;2.99 : Chocolate</li>
		<li data-value="3.49">&pound;3.49 : Cereal</li>
		<li data-value="0.98">&pound;0.98 : Milk</li>
		<li data-value="0.89">&pound;0.89 : Bread</li>
		<li data-value="3.79">&pound;3.79 : Coffee</li>
		<li data-value="2.53">&pound;2.53 : Strawberries</li>
		<li data-value="3.89">&pound;3.89 : Cheesecake</li> 
	</ul>
</section>
<section id="cart">
	<p>Shopping Cart</p>
	<ul id="shoppinglist" class="cartlist"></ul>
</section>
<div id="outputinfo">
	<p><button id="calctotal">Calculate Total</button> : <span id="totalresult"></span></p>
</div>
</body>

<script>

function getTargetElement(e) {
	var targetelement=null;
	targetelement=(e.srcElement || e.target || e.toElement)
	return targetelement;
}

function calcTotal() {
	var shoppinglist=document.getElementById("shoppinglist");
	var total=0;
	for(i=0;i<shoppinglist.children.length;i++) {
		total+=parseFloat(shoppinglist.children[i].getAttribute("data-value"));
	}
	var totalresult=document.getElementById("totalresult");
	totalresult.innerHTML="&pound;"+total.toFixed(2);
}

function handleEvent(e) {
	var listclicked=getTargetElement(e);
	var newlistitem=document.createElement("li");
	var datavalue=listclicked.getAttribute("data-value");
	newlistitem.setAttribute("data-value",datavalue);
	newlisttext=document.createTextNode(listclicked.innerHTML)
	newlistitem.appendChild(newlisttext);
	var shoppinglist = document.getElementById("shoppinglist");
	shoppinglist.appendChild(newlistitem);
	
	var list = document.getElementById("shoppinglist");   
	
	list.onclick = function() { list.parentNode.removeChild(list);} 


	console.log(listclicked);
}

function removeItem(e){

	var listclicked=getTargetElement(e);
	var node = document.getElementById('shoppinglist');
	listclicked.parentNode.removeChild(listclicked);
}

document.onreadystatechange = function(){
	if(document.readyState=="complete") {
	var sourcelist=document.getElementById("sourcelist");
	
	for(i=0;i<sourcelist.children.length;i++) {
			if(document.addEventListener) {
				sourcelist.children[i].addEventListener("click", handleEvent, false);

			} else {
				sourcelist.children[i].attachEvent("onclick", handleEvent);
			}
		
		var totalbutton=document.getElementById("calctotal");
		if(document.addEventListener) {
			totalbutton.addEventListener("click",calcTotal,false);
		} else {
			totalbutton.attachEvent("onclick",calcTotal);
		}

		}

	}
}
</script>
 
</html>

＆＃13;

Answer 1

您不想删除整个列表，只删除单击的LI元素。

由于您似乎没有嵌套元素，事件委派变得更容易

var list = document.getElementById("shoppinglist");   

list.addEventListener('click', function(evt) { 
    list.removeChild(evt.target);
},false);

FIDDLE

将来，如果您想要nesten元素，可以使用element.closest()

var list = document.getElementById("shoppinglist");   

list.addEventListener('click', function(evt) {
    var p = evt.target.closest('li');
   list.removeChild(p);
}, false);

请注意closest()旧版浏览器缺乏支持，但如果需要，可以使用多个填充。

另请注意，您在事件处理程序中绑定了事件处理程序，这是一个很大的禁忌，您的代码相当于

var sourcelist = document.getElementById("sourcelist");

for(i = 0; i < sourcelist.children.length; i++) {
    sourcelist.children[i].addEventListener("click", handleEvent, false);
    ...

// and then

function handleEvent(e) {

    var list = document.getElementById("shoppinglist");   

    list.addEventListener('click', function(evt) { 
        list.removeChild(evt.target);
    },false);
    ....

因此，每次将另一个列表项添加到列表中时，都会绑定一个新的事件处理程序，并且它会累加，但是您只需要一个事件处理程序，多个事件处理程序将尝试删除相同的元素再次，但它第一次被删除。

Answer 2

list.onclick = function() { list.parentNode.removeChild(list);}

list是整个列表（<ul id='list'>）。您正在侦听整个列表中的单击。然后用list.parentNode抓取整个列表的父节点（它给你<section id="cart">）并从中删除列表。

您的代码完全按照您的要求执行。

Answer 3

像这样：

list.removeChild(list.childNodes[indexToRemove])

您需要指定要删除的节点。您可以通过打开控制台并粘贴以下内容在Chrome中对此进行测试：

var list = document.getElementById("shoppinglist");

console.log('List:', list)
console.log('List children:', list.childNodes)

var indexToRemove = 0;

list.removeChild(list.childNodes[indexToRemove]);

console.log('List:', list)
console.log('List children:', list.childNodes)

Answer 4

您可以使用：

var list = document.getElementById("shoppinglist");  
list.onclick = function(e) { e.target.parentNode.removeChild(e.target);}

您可以详细了解target和currentTarget，并查看此示例http://fiddle.jshell.net/hidoos/Lpz917vo/

Javascript - 删除列表项

4 个答案: