javascript - テーブルの2行を削除または追加する方法

Question

右側のバスケットアイコンをクリックすると、電流<tr>と黄色も削除したいと思います。<tr>

これがスクリーンショットです：

クリックして削除したい2行の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>、黄色いものは残ります。

何か考えはありますか？

Answer 1

2 つの行を選択する特定の方法がない場合、これは基本的に難しいことです。

要素のIDを取得して要素を削除するグローバルJavaScript関数を作成します

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();
});