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 :
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 €</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
});
