JSを使用してテーブル内の行を削除

Question

onclickイベントの後に新しい行を自動的に作成するテーブルを作成しました。また、コードは、クリックされたときに行を削除するボタンを作成します。

問題を解決できないという問題は、2回目の「add row onclick event」をクリックして同じ行の2つのコピーを取得したときです。私を助けることができる

あなたは、コードを見つけることができ、ここで下に、誰のために事前にありがとう：

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 
} 

EDIT

そして、この修正プログラムは、同じ製品を毎回追加することで問題のお手伝いをしません。したがって、displayShoppingCartと呼ぶたびにshoppingCartアレイを消去するか、アルゴリズムを書き換えて、製品インフォをアレイに格納しないようにしてください。