如何删除克隆的行

Hugo 发表于 Dev

雨果

试图做一个购物车。我创建了一个包含产品的表（每行包含一个项目，其价格和一个用于选择它的按钮）。使用js，当您单击某个项目的按钮时，它将克隆该项目的整个行，并将该克隆放入第二个表（即购物篮）中。我想在单击其按钮时删除第二个表的克隆行。这与删除DOM父级无关，因为按钮父级是td，而不是我要删除的整个tr。

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>

毗湿奴

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。