JQuery - Delete table row if delete button is clicked

Question

I'm creating a basic database that's intended to only be stored in memory as practice in Javascript. Each new row gets it own corresponding delete and edit buttons. My problem now is how to get these delete buttons to work, that when you click on one it deletes it's row. Here is my code at this moment:

Javascript

function onload(){
$("#addbutton").on("click",addRow);

$(".delete").onclick(function(){
   $(this).closest('tr').remove(); 
});

    var i = 1;

    function addRow(){        
        var newRow = "<tr rowID='" + i + "'>"+"<td><div>"+$("#namebox").val()+
                    "</div></td>"+"<td><div>"+$("#surnamebox").val()+"</div></td>"+"<td><div>"+$("#agebox").val()+"<td><div><button id='" + i + "' class='delete' name='delete'type='button'>DELETE</button></div></td>"+"<td><div><button class='edit' name='edit'type='button'>EDIT</button></div></td><td><p>"+ i + "</p></td></tr>"; //Adds the row with content and 
                            // buttons
        $(newRow).appendTo("#maintable"); //Append the new row
            // to the table
        // Next three commands clear the input boxes
        $("#namebox").val('');
        $("#surnamebox").val('');
        $("#agebox").val('');
        // Add to the numer of rows in the table
        i++;
    }// addRow END
};

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Memory-Only Database</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-
ui.min.js"></script>
</head>
<body onload="onload()">
<div id="header">
    <h2>Memory-Only Database</h2>
</div>
<div id="input-table">
<table id="maintable" style="width: 60%">
    <tr>
        <th>Name</th>
        <th>Surname</th>
        <th>Age</th>
        <th id="buttons1">buttons1</th>
        <th id="buttons2">buttons2</th>
        <th id="counter">counter</th>
    </tr>
    <tr>
        <td>
            <input id="namebox" name="name" type="text" value="">
        </td>
        <td>
            <input id="surnamebox" name="surname" type="text" value="">
        </td>
        <td>
            <input id="agebox" name="age" type="number" value="">
        </td>
        <td>
            <button id="addbutton" name="add" type="button">ADD</button> 
        </td>
    </tr>
    </table>
   </div>
    </body>    
    </html>

CSS

body{
 background-color: darkcyan;
}

div#header{
 position: relative;
 left: 30em;
 width: 18em;
 text-align: center;
}
div#input-table{
 width:50em;
}

table,th,tr,td{
 border: 1px solid black;
 border-collapse: collapse;    
}

td{
text-align: center;
}

th#buttons{
width: inherit;
 }

where you want to place delete button

Mujthaba Ibrahim
– Mujthaba Ibrahim

2017-07-02 16:38:01 +00:00
Commented Jul 2, 2017 at 16:38 — Mujthaba Ibrahim
– Mujthaba Ibrahim, Commented Jul 2, 2017 at 16:38

Dinesh undefined · Accepted Answer · 2017-07-02 16:42:00Z

You should use event delegation for delete button. since you are adding button dynamically.

$(document).on("click",'.delete',function(){

   $(this).closest('tr').remove(); 
});

function onload(){
$("#addbutton").on("click",addRow);


    var i = 1;

    function addRow(){        
        var newRow = "<tr rowID='" + i + "'>"+"<td><div>"+$("#namebox").val()+
                    "</div></td>"+"<td><div>"+$("#surnamebox").val()+"</div></td>"+"<td><div>"+$("#agebox").val()+"<td><div><button id='" + i + "' class='delete' name='delete'type='button'>DELETE</button></div></td>"+"<td><div><button class='edit' name='edit'type='button'>EDIT</button></div></td><td><p>"+ i + "</p></td></tr>"; 
//Adds the row with content and 
                            // buttons
        $(newRow).appendTo("#maintable"); //Append the new row
            // to the table
        // Next three commands clear the input boxes
        $("#namebox").val('');
        $("#surnamebox").val('');
        $("#agebox").val('');
        // Add to the numer of rows in the table
        i++;
    }// addRow END
};


$(document).on("click",'.delete',function(){
    
   $(this).closest('tr').remove(); 
});

body{
 background-color: darkcyan;
}

div#header{
 position: relative;
 left: 30em;
 width: 18em;
 text-align: center;
}
div#input-table{
 width:50em;
}

table,th,tr,td{
 border: 1px solid black;
 border-collapse: collapse;    
}

td{
text-align: center;
}

th#buttons{
width: inherit;
 }

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-
ui.min.js"></script>
</head>
<body onload="onload()">
<div id="header">
    <h2>Memory-Only Database</h2>
</div>
<div id="input-table">
<table id="maintable" style="width: 60%">
    <tr>
        <th>Name</th>
        <th>Surname</th>
        <th>Age</th>
        <th id="buttons1">buttons1</th>
        <th id="buttons2">buttons2</th>
        <th id="counter">counter</th>
    </tr>
    <tr>
        <td>
            <input id="namebox" name="name" type="text" value="">
        </td>
        <td>
            <input id="surnamebox" name="surname" type="text" value="">
        </td>
        <td>
            <input id="agebox" name="age" type="number" value="">
        </td>
        <td>
            <button id="addbutton" name="add" type="button">ADD</button> 
        </td>
    </tr>
    </table>
   </div>

Alexander · Accepted Answer · 2017-07-02 16:40:26Z

1

There is no onclick method in jQuery, use click instead.

$(".delete").click(function() {
  $(this).closest("tr").remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Row 1</td>
    <td><button class="delete">Del</button></td>
  </tr>
  <tr>
    <td>Row 2</td>
    <td><button class="delete">Del</button></td>
  </tr>
  <tr>
    <td>Row 3</td>
    <td><button class="delete">Del</button></td>
  </tr>
</table>

answered Jul 2, 2017 at 16:40

Alexander

4,5527 gold badges31 silver badges46 bronze badges

2 Comments

Daniel Over a year ago

I tried your code, did not work in my script for some reason. I think for some reason it does not detect that I click on the delete button

Alexander Over a year ago

@Daniel, yes. You add the buttons through JS, thus the event handler doesn't know about buttons, that is added after the handler creation. Use event bubbling to solve this.

Minar_Mnr · Accepted Answer · 2017-07-02 18:02:42Z

Another way you can delete row .... during adding new row give that row an id and call an onclick function during delete.

 function deleterow(id){
     $("#newrow-"+id+"").remove();
}
function onload(){
$("#addbutton").on("click",addRow);


var i = 1;

function addRow(){        
    var newRow = "<tr id='newrow-"+i+"'>"+"<td><div>"+$("#namebox").val()+
                "</div></td>"+"<td><div>"+$("#surnamebox").val()+"</div></td>"+"<td><div>"+$("#agebox").val()+"<td><div><button id='" + i + "' class='delete' name='delete' type='button' onclick='deleterow("+i+")'>DELETE</button></div></td>"+"<td><div><button class='edit' name='edit'type='button' >EDIT</button></div></td><td><p>"+ i + "</p></td></tr>"; //Adds the row with content and 
                        // buttons
    $(newRow).appendTo("#maintable"); //Append the new row
        // to the table
    // Next three commands clear the input boxes
    $("#namebox").val('');
    $("#surnamebox").val('');
    $("#agebox").val('');
    // Add to the numer of rows in the table
    i++;
}// addRow END

};

body{
 background-color: darkcyan;
}

div#header{
 position: relative;
 left: 30em;
 width: 18em;
 text-align: center;
}
div#input-table{
 width:50em;
}

table,th,tr,td{
 border: 1px solid black;
 border-collapse: collapse;    
}

td{
text-align: center;
}

th#buttons{
width: inherit;
 }

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-
ui.min.js"></script>
</head>
<body onload="onload()">
<div id="header">
    <h2>Memory-Only Database</h2>
</div>
<div id="input-table">
<table id="maintable" style="width: 60%">
    <tr>
        <th>Name</th>
        <th>Surname</th>
        <th>Age</th>
        <th id="buttons1">buttons1</th>
        <th id="buttons2">buttons2</th>
        <th id="counter">counter</th>
    </tr>
    <tr>
        <td>
            <input id="namebox" name="name" type="text" value="">
        </td>
        <td>
            <input id="surnamebox" name="surname" type="text" value="">
        </td>
        <td>
            <input id="agebox" name="age" type="number" value="">
        </td>
        <td>
            <button id="addbutton" name="add" type="button">ADD</button> 
        </td>
    </tr>
    </table>
   </div>

Collectives™ on Stack Overflow

JQuery - Delete table row if delete button is clicked

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related