How to delete multiple or single rows

Question

I have tables with father son relationships. If you delete the father, the sons under it are deleted. You can also delete an individual son. My code so far doesn't delete the father or son with the corresponding id, it deletes the first thing in the table. Here is my code:

And my HTML:


Are you sure you want to delete the father and corresponding sons?

Please confirm deletion.

Please confirm deletion.

Are you sure you want to delete the father and corresponding sons?

Please confirm deletion.

Please confirm deletion.

  
    Father 1
    
      
  
  
     
    Son 1
    
      
  
  
     
    Son 2
    
      
  
  
    Father 2
    
      
  
 
     
    Son 3
    
      
  
  
     
    Son 4

Also, the jsfiddle. It's not working correctly(don't know what I did wrong), but my code is there. Thanks in advance! http://jsfiddle.net/7tFFS/1/

Grinn · Accepted Answer

I cleaned things up and refactored your code. Here's the JSFiddle.

The HTML:

Are you sure you want to delete the father and corresponding sons?
    

    
    

Please confirm deletion.
    

    
    


    
        Father 1
        
            
        
    
    
         
        Son 1
        
            
        
    
    
         
        Son 2
        
            
        
    
    
        Father 2
        
            
        
    
    
         
        Son 3
        
            
        
    
    
         
        Son 4

The JS:

function showModal(id, child) {
    var $modal = $(child ? "#delSonModal" : "#delAllModal");
    $modal.fadeIn("slow")
        .find(".delete")
        .one("click", function () {
            $("#" + id + ", [data-father=" + id + "]").fadeOut("slow");
            $modal.fadeOut("slow");
        });
}


$("input.hide").click(function () {
    $(this).closest("div.delModal").fadeOut("slow");
});

$("#vessel_tab input.delete").bind("click", function () {
    var $tr = $(this).closest("tr");
    showModal($tr.attr("id"), !!$tr.data("father"));
});

EDIT:

Your Fiddle wasn't working because of your use of in-HTML onClick handlers. It's not necessarily wrong, but JSFiddle didn't seem to like it. I replaced those with jQuery handlers, throughout.

In the HTML, your repeating of your dialogs wasn't necessary so I took those out and put them outside the table. There were some anchor tags that were superfluous as well, which I removed. I also added slashes to the end of your input tags... Not really all that necessary, but XHTML requires it and it made Fiddle crazy, so that's that. I used classes instead of ID's in some places (like the cancel/delete buttons) to give a simple way to reference them in jQuery as a group. (You can't have duplicate ID tags without things throwing up.) The data-father tag on all the sons is what is used later in showModal to determine which dialog (delAllModal or delSonModal) should be displayed, and more importantly to link the sons to their fathers to allow their deletion as a whole unit.

In the JS:

A lot of the code I rewrote to just execute in-line instead of calling a function. The exception being showModal.
$("input.hide").click... Wires up both of the Cancel buttons in the dialogs.
$("#vessel_tab input.delete")... Wires up all of the Delete buttons in the table. It's basically just a wrapper for showModal...
...which brings us to the meat. showModal:
- The var $modal... line picks which dialog to display based on if the clicked button was for a child.
- The dialog is shown, and its delete button is wired up. Notice that I use one here, and not on. This will make a click handler for the button, but dispose of it immediately upon it's use. on would have probably worked fine, but this leaves less mess behind.
- The click handler calls fadeOut on both the passed ID, and any elements that have that have that ID as their data-father attribute - effectively, ID's children. For Fathers, this hides the Father and the Sons. For Sons it only hides the Son since no elements will have data-father attributes matching the Son's ID.
- Finally, we close the dialog.

I hope this is all pretty clear. Happy Hacking!

How to delete multiple or single rows

Answers (2)

Related Questions