[英]How to remove a dynamically created node in Javascript
我正在用JavaScript创建一个简单的购物车网页作为作业。 我正在为购物车中的每本书创建一个“删除项目”按钮,但是我还不太清楚如何实现它。 我知道这将需要使用DOM树,但是我不知道如何使用。 以下是相关代码:
<script>
function addToCart(bookToAdd, priceToAdd)
{
//Create the node
var bookInfo = document.createElement();
bookInfoString = "Book: " + document.getElementById(bookToAdd).innerHTML +
" <br />Price: $" + document.getElementById(priceToAdd).innerHTML +
'<br /> <button type="button" onclick="removeFromCart(' + bookToAdd + ', ' + priceToAdd + ')">Remove from cart!</button> <br /> <br />';
bookInfo.innerHTML = bookInfoString;
//Append the node
document.getElementById('cartItems').appendChild(bookInfo);
//Update the cart total
document.getElementById('totalPrice').firstChild.nodeValue = (parseFloat(document.getElementById('totalPrice').innerHTML) + parseFloat(document.getElementById(priceToAdd).innerHTML)).toFixed(2);
}
function removeFromCart(bookToRemove, priceToRemove)
{
//Remove the node
getElementById('cartItems').removeChild(bookToRemove);
//Update the cart total
document.getElementById('totalPrice').firstChild.nodeValue = (parseFloat(document.getElementById('totalPrice').innerHTML) - parseFloat(document.getElementById(priceToRemove).innerHTML)).toFixed(2);
}
</script>
... html代码的相关部分:
<tr>
<!--Fill in the first book information-->
<td> <span class="bookName" id="book1"><b>Artificial Intelligence: A Modern Approach</b></span><br>
<img src="AI.jpeg" alt="AI Book Cover" width="100"> <br>
<b>ISBN:</b> 978-0-13-604259-4 <br>
<b>Description:</b> Artificial Intelligence: A Modern Approach, 3e offers the most comprehensive,
up-to-date introduction to the theory and practice of artificial intelligence. Number one in
its field, this textbook is ideal for one or two-semester, undergraduate or graduate-level
courses in Artificial Intelligence. <br>
<b>PRICE: $</b> <span id="price1"> 158.55 </span>
<button type="button" onclick="addToCart('book1', 'price1')">Add to cart!</button>
</td>
<!-- Create the shopping cart area of the page-->
<td rowspan="10">
<!-- Create the space for the items in the cart to be written -->
<div id="cartItems"></div>
<!-- Create the space for the Total Price to be written -->
<b>Total Price: $<div style="display: inline" id="totalPrice">0</div></b>
</td>
</tr>
除了删除条目外,其他所有功能都起作用。 我特别难以解决如何访问需要删除的特定节点。 上面显示的关于人工智能书的购物车中的所有条目都是用相同的ID('book1')创建的,所以我不知道该如何挑选。
提前致谢。
试试这个-我给它一个唯一的ID,但是因为我删除了parentNode,所以实际上并不需要它
function addToCart(bookToAdd, priceToAdd) {
//Create the node
var bookInfo = document.createElement("div");
bookInfoString = "Book: " + document.getElementById(bookToAdd).innerHTML +
" <br />Price: $" + document.getElementById(priceToAdd).innerHTML +
'<br /> <button type="button" onclick="removeFromCart(this.parentNode,'+
priceToAdd + ')">Remove from cart!</button> <br /> <br />';
bookInfo.innerHTML = bookInfoString;
bookInfo.id=bookToAdd+'_'+new Date().getTime();
//Append the node
document.getElementById('cartItems').appendChild(bookInfo);
//Update the cart total
document.getElementById('totalPrice').innerHTML = (parseFloat(document.getElementById('totalPrice').innerHTML) + parseFloat(document.getElementById(priceToAdd).innerHTML)).toFixed(2);
}
function removeFromCart(bookToRemove, priceToRemove) {
//Remove the node
getElementById('cartItems').removeChild(bookToRemove);
//Update the cart total
document.getElementById('totalPrice').innerHTML = (parseFloat(document.getElementById('totalPrice').innerHTML) - parseFloat(document.getElementById(priceToRemove).innerHTML)).toFixed(2);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.