<body> <table id="delte"> <caption>簡易購物車</caption> <tr> <th class="goods">商品</th> <th>單價</th> <th>數量</th> <th>小計</th> <th>操作</th> </tr> <tr class="shop1" id="shop2"> <td class="goods">小米MIX</td> <td id="price">5000</td> <td class="number"> <input type="button" value="-" id="jian1" onclick="minus('price','number','total')"> <input type="text" value="1" id="number" class="num" onblur="change('price','number','total')"> <input type="button" value="+" id="jia1" onclick="add('price','number','total')"> </td> <td id="total">5000</td> <td><a href="#" onclick="dele(this)">刪除</a></td> </tr> <tr class="shop1" id="shop3"> <td class="goods">iphone 8</td> <td id="price2">6000</td> <td class="number"> <input type="button" value="-" id="jian2" onclick="minus('price2','count','total2')"> <input type="text" value="1" id="count" class="num" onblur="change('price2','count','total2')"> <input type="button" value="+" id="jia2" onclick="add('price2','count','total2')"> </td> <td id="total2">6000</td> <td><a href="#" onclick="dele(this)">刪除</a> </td> </tr> </table> </body>
方法一：
1 function dele(rows) { //傳值不可以用特殊字，如把rows 改成this，是沒有刪除效果的 2 var row = rows.parentNode.parentNode; // 按鈕所在行 3 var index = row.rowIndex; // 當前行的索引 4 var tb = row.parentNode; //當前表格 5 tb.deleteRow(index); 6 }
方法二：
function dele(obj) { //傳值 var Row = obj.parentNode; while (Row.tagName.toLowerCase() != "tr") { Row = Row.parentNode; } Row.parentNode.removeChild(Row); //刪除行 }