delete dynamically created rows in javascript

Question

I have a script which creates a new row on a button click. Now how will i add delete to each row, so that when i click, it deletes the row. My script is below:

<html>
    <head>
    <link rel="stylesheet" type="text/css" href="style1.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script type="text/javascript">
           $('button').click(function() {
       $(this).parents('tr').remove();
       });
      </script>

     <script type="text/javascript">
        function addTextArea(){
        var div = document.getElementById('div_quotes');
        var temp = document.createElement('div');
        temp.innerHTML ="<table width='600' border='1' style='border-collapse: collapse' cellpadding='3' cellspacing='3'><tr><td width='5%'><button>Delete</button></td><td width='5%'><input type='text' name='slno[]' size='2' /></td><td width='40%'><input type='text' name='item_name[]' size='42' /></td><td width='6%'><input type='text' name='qty[]' size='2' /></td><td width='9%'><input type='text' name='item_units[]' size='5' /></td></tr></table>";
        div.appendChild(temp );
    }
     </script>
   </head>
    <body>
    <form method="post" action="ajax.php?tender_id=1&supplier_name=KR ELECT">
    <div id="div_quotes">
    <table width='600' border='1' style='border-collapse: collapse' cellpadding='3' cellspacing='3'>
    <tr bgcolor='#E6E6FA'>
    <td width='6%'></td>
    <td width='6%'>Slno</td>
    <td width='39%'>Item Name</td>
    <td width='6%'>Qty</td>
    <td width='9%'>Units</td></tr>
    </table>
    </div>
    <br />

    <input type="button" value="Click to add More Items" onClick="addTextArea();">
    <input type="submit" name="submitted" value="Submit">
    </form>
    </body>
    </html>

Possible duplicate of: http://stackoverflow.com/questions/3955229/remove-all-child-elements-of-a-dom-node-in-javascript — 1cgonza, Nov 04 '15 at 04:42
i could see many incidents regarding this. I tried. it was not working. so posted it here. Anyways thanx for the info. — Sanju Menon, Nov 04 '15 at 04:44

Saurav Wahid · Accepted Answer · 2015-11-04T05:25:17.490

First create a function rowDelete(link)

function rowDelete(link) {
     var row = link.parentNode.parentNode;
     var table = row.parentNode; 
     table.removeChild(row);}

and call this function on generate delete <a> tag

<a href='#' onclick='rowDelete(this); return false;'>Del</a>

here your full code

<html>
<head>
<link rel="stylesheet" type="text/css" href="style1.css">

    <script type="text/javascript">

    function addTextArea(){
    var div = document.getElementById('div_quotes');
    var temp = document.createElement('div');
    temp.innerHTML ="<table width='600' border='1' style='border-collapse: collapse' cellpadding='3' cellspacing='3'><tr><td width='5%'><a href='#' onclick='rowDelete(this); return false;'>Del</a></td><td width='5%'><input type='text' name='slno[]' size='2' /></td><td width='35%'><input type='text' name='item_name[]' size='42' /></td><td width='6%'><input type='text' name='qty[]' size='2' /></td><td width='9%'><input type='text' name='item_units[]' size='5' /></td></tr></table>";
    div.appendChild(temp );
}
    function rowDelete(link) {
     var row = link.parentNode.parentNode;
     var table = row.parentNode; 
     table.removeChild(row); 
 }
    </script>

</head>
<body>
<form method="post" action="ajax.php?tender_id=1&supplier_name=KR ELECTRONICS INC">
<div id="div_quotes">
<table width='600' border='1' style='border-collapse: collapse' cellpadding='3' cellspacing='3'>
<tr bgcolor='#E6E6FA'>
<td width='5%'></td>
<td width='6%'>Slno</td>
<td width='39%'>Item Name</td>
<td width='6%'>Qty</td>
<td width='9%'>Units</td></tr>
</table>
</div>
<br />

 <input type="button" value="Click to add More Items" onClick="addTextArea();">
<input type="submit" name="submitted" value="Submit">
</form>
</body>
</html>

let me know if there any issue happy coding :)

score 0 · Answer 2 · answered Nov 04 '15 at 04:59

If you have a button in each row (inside a td), you can find and remove its grandparent (tr):

$('button').click(function() {
  $(this).parents('tr').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width='600' border='1' style='border-collapse: collapse' cellpadding='3' cellspacing='3'>
  <tr bgcolor='#E6E6FA'>
    <td width='5%'></td>
    <td width='6%'>Slno</td>
    <td width='39%'>Item Name</td>
    <td width='6%'>Qty</td>
    <td width='9%'>Units</td>
    <td width='9%'></td>
  </tr>
  <tr>
    <td width='5%'></td>
    <td width='6%'>xyz</td>
    <td width='39%'>xyz</td>
    <td width='6%'>xyz</td>
    <td width='9%'>xyz</td>
    <td width='9%'>
      <button>Delete</button>
    </td>
  </tr>
  <tr>
    <td width='5%'></td>
    <td width='6%'>123</td>
    <td width='39%'>123</td>
    <td width='6%'>123</td>
    <td width='9%'>123</td>
    <td width='9%'>
      <button>Delete</button>
    </td>
  </tr>
  <tr>
    <td width='5%'></td>
    <td width='6%'>abc</td>
    <td width='39%'>abc</td>
    <td width='6%'>abc</td>
    <td width='9%'>abc</td>
    <td width='9%'>
      <button>Delete</button>
    </td>
  </tr>
</table>

score 0 · Answer 3 · answered Nov 04 '15 at 05:22

For my own sanity I am going to ignore all the things you can do to improve your code and just answer the question in a similar style:

you should be able to just replace your section with this

<script type="text/javascript">

var i = 1;

function addTextArea(){
var div = document.getElementById('div_quotes');
var temp = document.createElement('div');
temp.innerHTML ="<table id='row" + i + "' width='600' border='1' style='border-collapse: collapse' cellpadding='3' cellspacing='3'><tr><td width='5%'><a href='#' onClick='removeRow(&#39;row" + i + "&#39;)'>Del</a></td><td width='5%'><input type='text' name='slno[]' size='2' /></td><td width='35%'><input type='text' name='item_name[]' size='42' /></td><td width='6%'><input type='text' name='qty[]' size='2' /></td><td width='9%'><input type='text' name='item_units[]' size='5' /></td></tr></table>";
div.appendChild(temp );
i++;
}
    function removeRow(rowId)
    {
        var rowToRemove = document.getElementById(rowId);
        //Might want to do some error checking
        rowToRemove.parentNode.removeChild(rowToRemove);
    }
    </script>

delete dynamically created rows in javascript

3 Answers3