April 7, 2012

How to Remove or add 2 rows in a table

Question by Mehdi

Hello !

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

here is a screenshot :

enter image description here

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 and the yellow One stays.

Have you any idea ?
Thank you 🙂

Answer by Vapire

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

Answer by Starx

This is basically going to tough to do when you dont have a specific way to select the two rows.

Create a global javascript function to remove the elements by taking the element’s id

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

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

Using jQuery you can do something like this

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

Please fill the form - I will response as fast as I can!