Question

I want to remove the current <tr> and the yellow <tr> too when I click to the basket icon on the right.

Here is a screenshot :

Here is my html code of the two rows which I want to delete by the click:

<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>

and the Javascript code :

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

But with this code I can only remove the big <tr> and the yellow One stays.

Have you any idea?

Answer 1

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