如何删除克隆的行

Question

Trying to make a shopping cart. I've created a table containing products (each row contains an item, its price, and a button to select it). With js, when you click on a button of an item it clones the entire row of this item and put the clone in a second table (which is the shopping basket). I would like to remove a cloned row of the second table when clicking on its button. It's not about remove the DOM parent, because the button parent is a td and not the entire tr which I would like to delete.

 let basket = document.getElementById("products_cart") let buttons = document.querySelectorAll('.item_button'); for (button of buttons) { button.addEventListener('click', cloneLine); } function cloneLine(e) { let td = e.target.parentNode; let tr = td.parentNode; let clone = tr.cloneNode(true); basket.appendChild(clone); clone.querySelector('.item_button').textContent = "-"; } 

 <h1>CHOOSE</h1> <table id="starters"> <tr> <th>PRODUCT</th> <th>PRICE</th> <th>ADD TO CART</th> </tr> <tr> <td>Cherry</td> <td>6</td> <td><button class="item_button">+</button></td> </tr> <tr> <td>Peach</td> <td>8</td> <td><button class="item_button">+</button></td> </tr> <tr> <td>Strawberry</td> <td>12</td> <td><button class="item_button">+</button></td> </tr> </table> <h1>YOUR CHOICE</h1> <table id="products_cart"> </table> 

Answer 1

 let basket = document.getElementById("products_cart") let buttons = document.querySelectorAll('.item_button'); for (button of buttons) { button.addEventListener('click', cloneLine); } function cloneLine(e) { let td = e.target.parentNode; let tr = td.parentNode; let clone = tr.cloneNode(true); basket.appendChild(clone); clone.querySelector('.item_button').textContent = "-"; clone.querySelector('.item_button').addEventListener("click", function(){ basket.removeChild(clone); }); } 

 <h1>CHOOSE</h1> <table id="starters"> <tr> <th>PRODUCT</th> <th>PRICE</th> <th>ADD TO CART</th> </tr> <tr> <td>Cherry</td> <td>6</td> <td><button class="item_button">+</button></td> </tr> <tr> <td>Peach</td> <td>8</td> <td><button class="item_button">+</button></td> </tr> <tr> <td>Strawberry</td> <td>12</td> <td><button class="item_button">+</button></td> </tr> </table> <h1>YOUR CHOICE</h1> <table id="products_cart"> </table>