Delete rows in a table using JS

Question

I have created a table that creates new rows automatically after an onclick event. Also the code create a button that delete the rows when it's clicked.

The problem that I can't solve it's when I click for the second time the 'add row onclick event' I get two copies of the same row.

Thank you in advance for anyone can help me, here below you can find the code:

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();
}

just advice: create a working https://jsfiddle.net/ example to help others to help you =) — Slavik, Sep 15 '16 at 12:39
http://stackoverflow.com/questions/36514870/how-to-delete-a-row-in-a-table-using-jquery/36515092#36515092 check this link. May be u'll get the answer. — Jagrati, Sep 15 '16 at 12:40

Slavik · Accepted Answer · 2016-09-15T12:49:31.113

0

When you call AddtoCart you add element to array shoppingCart, but when you remove row you just remove DOM elements, but information about your item is still in that array.

So you have to remove it from array too:

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
}

EDIT

And this fix won't help you with problem with adding same products every time. So you can clear shoppingCart array every time you call displayShoppingCart or rewrite your algorithm to don't use array for storing product infos in it.

edited Sep 15 '16 at 12:49

answered Sep 15 '16 at 12:44

Slavik

5,838
2
13
16

Dear Slavik, thank you for your quick reply! I tryed to add your edited code to mine but i have the some problem again. Should I have to rewrite my code? Thank you for your help! – Federico Curtoni Sep 15 '16 at 13:38
@FedericoCurtoni try to insert `shoppingCart = []` at the end of `displayShoppingCart` and don't use previous fix `shoppingCart.splice(i, 1);` – Slavik Sep 15 '16 at 13:40
thank you! Now it works perfectly! Thank you again, have a great day! – Federico Curtoni Sep 15 '16 at 13:56
@FedericoCurtoni but think about why it works and rewrite your code, please =) – Slavik Sep 15 '16 at 13:57
1

I think because you "clear" the array and reset it? Obviously I will keep learning about JS and improve my code :) – Federico Curtoni Sep 15 '16 at 14:13

Delete rows in a table using JS

1 Answers1