1
リストアイテムをクリックすると、正しく削除されますか？Javascript - リストアイテムを削除する
私はアイテムを削除するには、コードの次の行を使用していたが、代わりに、これは全体のリスト自体が削除されます：私はこれを行う方法にオンラインで検索されていると同じ種類のコードを保持します
var list = document.getElementById("shoppinglist");
list.onclick = function() { list.parentNode.removeChild(list);}
出現すると私はこれを解決する方法がわかりません。私は、生成されたリストアイテムが "ショッピングリスト"の子であると仮定しました。
私はJavascriptの新機能です。これはルーキーミスですが、本当に助けていただければ幸いです。ありがとうございました。
<!doctype html>
<html dir="ltr" lang="en-gb">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
body {
\t /* Sets the width then uses the margin auto feature to centre the page in the browser */
\t width:800px;
\t margin: 0px auto; /*0px top/bottom auto left/right */
\t font-size:10px; /* By default fonts are usually 16px but may not be in some browsers */
}
p, li {
\t font-size:1.5em; /* Set all text to be 1.5 * overall font size = 15 pixels */
}
section {
\t /* each of the two sections will use just under half the width of the width of the body */
\t width:395px;
\t display:block;
}
#choices {
\t /* float the choices list to the left of the page */
\t float:left;
\t background-color: #FFFF99;
}
#cart {
\t /* float the shopping cart to the right of the page */
\t float:right;
\t background-color: #7FFF00;
}
.cartlist {
\t /* Simplify the display of the lists, removing default bullet points and indentation */
\t list-style-type:none;
\t margin:0px;
\t padding:0px;
\t width:inherit;
}
.cartlist li {
\t /* Set each list item to be 2* the height of the text */
\t height:2em;
}
.cartlist li:nth-child(odd) {
\t /* Colour odd list items ie first, third, fifth etc, a different colour */
\t background-color:#eee;
}
#outputinfo {
\t /* prevents the DIV from joining the floating behaviour so it displays below the lists */
\t clear:both;
}
</style>
</head>
<body>
<section id="choices">
\t <p>Available Choices</p>
\t <ul id="sourcelist" class="cartlist">
\t \t <li data-value="2.99">£2.99 : Chocolate</li>
\t \t <li data-value="3.49">£3.49 : Cereal</li>
\t \t <li data-value="0.98">£0.98 : Milk</li>
\t \t <li data-value="0.89">£0.89 : Bread</li>
\t \t <li data-value="3.79">£3.79 : Coffee</li>
\t \t <li data-value="2.53">£2.53 : Strawberries</li>
\t \t <li data-value="3.89">£3.89 : Cheesecake</li>
\t </ul>
</section>
<section id="cart">
\t <p>Shopping Cart</p>
\t <ul id="shoppinglist" class="cartlist"></ul>
</section>
<div id="outputinfo">
\t <p><button id="calctotal">Calculate Total</button> : <span id="totalresult"></span></p>
</div>
</body>
<script>
function getTargetElement(e) {
\t var targetelement=null;
\t targetelement=(e.srcElement || e.target || e.toElement)
\t return targetelement;
}
function calcTotal() {
\t var shoppinglist=document.getElementById("shoppinglist");
\t var total=0;
\t for(i=0;i<shoppinglist.children.length;i++) {
\t \t total+=parseFloat(shoppinglist.children[i].getAttribute("data-value"));
\t }
\t var totalresult=document.getElementById("totalresult");
\t totalresult.innerHTML="£"+total.toFixed(2);
}
function handleEvent(e) {
\t var listclicked=getTargetElement(e);
\t var newlistitem=document.createElement("li");
\t var datavalue=listclicked.getAttribute("data-value");
\t newlistitem.setAttribute("data-value",datavalue);
\t newlisttext=document.createTextNode(listclicked.innerHTML)
\t newlistitem.appendChild(newlisttext);
\t var shoppinglist = document.getElementById("shoppinglist");
\t shoppinglist.appendChild(newlistitem);
\t
\t var list = document.getElementById("shoppinglist");
\t
\t list.onclick = function() { list.parentNode.removeChild(list);}
\t console.log(listclicked);
}
function removeItem(e){
\t var listclicked=getTargetElement(e);
\t var node = document.getElementById('shoppinglist');
\t listclicked.parentNode.removeChild(listclicked);
}
document.onreadystatechange = function(){
\t if(document.readyState=="complete") {
\t var sourcelist=document.getElementById("sourcelist");
\t
\t for(i=0;i<sourcelist.children.length;i++) {
\t \t \t if(document.addEventListener) {
\t \t \t \t sourcelist.children[i].addEventListener("click", handleEvent, false);
\t \t \t } else {
\t \t \t \t sourcelist.children[i].attachEvent("onclick", handleEvent);
\t \t \t }
\t \t
\t \t var totalbutton=document.getElementById("calctotal");
\t \t if(document.addEventListener) {
\t \t \t totalbutton.addEventListener("click",calcTotal,false);
\t \t } else {
\t \t \t totalbutton.attachEvent("onclick",calcTotal);
\t \t }
\t \t }
\t }
}
</script>
</html>
これは非常に便利でした。私は非常に感謝します。それは私に多くの見方を与え、理解してくれました。私はまた、他のコメントや他の誰もがそれらを見て、彼らが有用であるとして見て褒めたい。ありがとうございました。 – user3361789