Question

Okay, so I have a table with individual rows or parent rows with a few children linked to that parent. I have icons to delete either that father, or the individual son. The icons will show a modal pop up (rather than an alert) to confirm delete. It works, but I’m going to have to repeat it a lot. I figure this can be simplified to find an ID or class since the modal show/hide works this way. Thanks in advance.

<script>
function delVesselAll(){
    $("#vessel_tab #father1").remove();
    $("#vessel_tab .son1").remove();
    document.getElementById(id).style.display = 'block';
};
function delVesselAll2(){
    $("#vessel_tab #father2").remove();
    $("#vessel_tab .son2").remove();
    document.getElementById(id).style.display = 'block';
};
</script>

And my html:

<td class="cell_50">
  <a style="text-decoration:none;" onclick="showModal('delAll1')"><img src="images/delete-row-icon1.png" title="Delete this row" height="12" width="12" class="father1Del" id="father1Del"/></a>
</td>
<div class="delModal" style="z-index:999999; margin-left:200px; margin-top:30px; display:none" id="delAll1">
  <img src="images/warning.png" />&nbsp;Are you sure you want to delete vessel and the corresponding tanks?<br />
  <input type="button" value="Cancel" class="hide" onclick="hideModal('delAll1')"/>
  <input type="button" value="Delete" onclick="delVesselAll()"/>
</div>

So I basically have many rows that do the same thing, that can have the class or ID “father1” “father2” “son1” “son2”. Also I would like these divs to fade in and fade out, using something like $(this).fadeIn('slow');
Thanks in advance.

Answer 1

You can pass in the variable (potentially through a loop, though it depends on how your numbers are generated):

function delVesselAll(num){
    $("#vessel_tab #father" + num).remove();
    $("#vessel_tab .son" + num).remove();
    document.getElementById(id).style.display = 'block';
};

Then call it like:

delVesselAll(1);
delVesselAll(2);

If your numbers are predictable and sequential, you can iterate over them in a loop:

for (var i = 1; i < $("[id^='father']").length; i++) {
    delVesselAll(i);
}

If that is not clear, you may want to check out this tutorial.