Question

我正在使用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'）创建的，所以我不知道如何单独输出。

提前致谢。

Answer 1

试试这个 - 我给它一个唯一的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);
}

如何在Javascript中删除动态创建的节点

1 个答案: