使用JS删除表中的行

Question

我创建了一个在onclick 事件之后自动创建新行的表。代码还创建了一个按钮，当它被点击时删除行。

我无法解决的问题是，当我第二次单击“添加行 onclick 事件”时，我得到了同一行的两个副本。

提前感谢任何可以帮助我的人，您可以在下面找到代码：

function deleteRow(r) {
  var i = r.parentNode.parentNode.rowIndex;
  document.getElementById("orderedProductsTbl").deleteRow(i);
}

//this function manipulates DOM and displays content of our shopping cart
var shoppingCart = [];        
function displayShoppingCart(){
  var orderedProductsTblBody=document.getElementById("orderedProductsTblBody");
  //ensure we delete all previously added rows from ordered products table
  while(orderedProductsTblBody.rows.length>0) {
    orderedProductsTblBody.deleteRow(0);
  }

  //variable to hold total price of shopping cart
  var cart_total_price=0;
  //iterate over array of objects
  for(var product in shoppingCart){
    //add new row      
    var row=orderedProductsTblBody.insertRow();
    //add button
    var removeRow=document.createElement("Button");
    //set up button
    removeRow.innerHTML= "Delete"; 
    removeRow.setAttribute("onClick", "deleteRow(this)");                
    //create four cells for product properties 
    var cellName = row.insertCell(0);
    var cellDescription = row.insertCell(1);
    var cellPrice = row.insertCell(2);
    var cellDelete = row.insertCell(3);
    cellPrice.align="center";
    cellDescription.align ="right";
    cellDelete.align="right";
    cellName.height="40"
    cellPrice.height="40";
    cellDescription.height="40";
    cellDelete.height="40"
    //fill cells with values from current product object of our array
    cellName.innerHTML = shoppingCart[product].Name;
    cellDescription.innerHTML = shoppingCart[product].Description;
    cellPrice.innerHTML = shoppingCart[product].Price;
    cellDelete.appendChild( removeRow );
    cart_total_price+=shoppingCart[product].Price;     
  }
  //fill total cost of our shopping cart 
  document.getElementById("cart_total").innerHTML=cart_total_price;
}

function AddtoCart(name,description,price){
  //Below we create JavaScript Object that will hold three properties you have mentioned:    Name,Description and Price
  var singleProduct = {};
  //Fill the product object with data
  singleProduct.Name=name;
  singleProduct.Description=description;
  singleProduct.Price=price;
  //Add newly created product to our shopping cart 
  shoppingCart.push(singleProduct);
  //call display function to show on screen
  displayShoppingCart();
}

Answer 1

当您调用 AddtoCart 时，您将元素添加到数组 shoppingCart，但当您删除行时，您只是删除了 DOM 元素，但有关您的项目的信息仍在该数组中。

所以你也必须从数组中删除它：

function deleteRow(r) {
    var i = r.parentNode.parentNode.rowIndex;
    document.getElementById("orderedProductsTbl").deleteRow(i);
    shoppingCart.splice(i, 1); //http://stackoverflow.com/questions/5767325/how-to-remove-a-particular-element-from-an-array-in-javascript
}

编辑

而且此修复不会帮助您解决每次添加相同产品的问题。因此，您可以在每次调用 displayShoppingCart 时清除 shoppingCart 数组或重写您的算法以不使用数组在其中存储产品信息。