javascript - 如何在表格中删除或添加 2 行

Question

当我单击右侧的篮子图标时，我也想删除当前<tr>和黄色。<tr>

这是一个屏幕截图：

这是我想通过单击删除的两行的 html 代码：

<tr>
              <td class="bar_td" colspan=7>
                <strong>PRESTATION 2</strong>
              </td>
            </tr>
            <tr class="ligne_suppr">
              <td class="jr_td">
                <img class="jour_prest" src="img/ico/jour_presta.png" alt="" width="16" height="16" /> Mardi 24 jan 2011
                <p>ou</p>
                <img class="jour_prest" src="img/ico/jour_presta.png" alt="" width="16" height="16" /> Mercredi 25 jan 2011
              </td>
              <td class="cr_td">
                <select>
                  <option value="h9">10h30</option>
                  <option value="h10">11h30</option>
                </select>
                <select>
                  <option value="h11">10h30</option>
                  <option value="h12">11h30</option>
                </select>
              </td>
              <td class="rp_td">
                <select>
                  <option value="h13" SELECTED>2h00</option>
                  <option value="h14">3h00</option>
                </select>
              </td>
              <td class="mn_td">
                <select>
                  <option value="h15">2h00</option>
                  <option value="h16" SELECTED>6h00</option>
                </select>
              </td>
              <td class="tt_td">
                <strong>8h.</strong>
              </td>
              <td class="pttc_td">
                <strong>148 &#8364;</strong>
              </td>
              <td class="cor_td">
                <a href="#">
                  <img src="img/ico/corbeille.png" alt="" width="13" height="13" />
                </a>
              </td>
            </tr>

和 Javascript 代码：

<script>
          $(".ligne_suppr a").click(function(e) {
            e.preventDefault();
            ($(this).parent()).parent().remove();
          })
        </script>

但是使用此代码，我只能删除大<tr>的和黄色的 One。

你有什么想法吗？

Answer 1

当您没有选择两行的特定方法时，这基本上很难做到。

创建一个全局 javascript 函数以通过获取元素的 id 来删除元素

function deleteRows(row, yellow) {
    row = document.getElementById(row);    
    row.parentNode.removeChild(row);

    yellow = document.getElementById(yellow);
    yellow.parentNode.removeChild(yellow);
}

使用 jQuery 你可以做这样的事情

$(".ligne_suppr a").click(function(e) {
    e.preventDefault();
    var toprow = $(this).closest("tr");
    toprow.prev().remove(); // remove the yellow
    toprow.remove(); // remove the row
});

Answer 2

$('.ligne_suppr a').click(function(e) {
  e.preventDefault();
  var parent = $(this).parent().parent();  // parent <tr> of the anchor tag
  var previous = parent.prev();        // <tr> before the parent <tr>

  parent.remove();
  previous.remove();
});