How to delete a row in Javascript?

Question

I already have add/delete rows dynamically in Javascript, there is no problem in adding rows, only having a problem with deleting rows. For now, what I have made is when I want to delete a row it always deletes the last one, so I think I want if it only can be deleted the selected row, and I don't know how to modify the script to what I wanted be.

Here is the script:

var i=0;
function addRow()
{
 i++;
  m.r.value = i;
  var tbl = document.getElementById('table');
  var lastRow = tbl.rows.length;
  var iteration = lastRow - 1;
  var row = tbl.insertRow(lastRow);

  var cellLeft = row.insertCell(0);
  var textNode = document.createTextNode(iteration);
  cellLeft.appendChild(textNode);

  var cellRightSel1 = row.insertCell(1);
  var sel = document.createElement('select');
  sel.name = 'name' + iteration;
  sel.setAttribute("onchange", "choosec(this);");    
  var item = new Option("","");
  sel.options[sel.length] = item;
    <?
    while($data = mysql_fetch_array($result)){                                    
    ?>
  var item = new Option("<?=$data["Name"];?>","<?=$data["ID"];?>");
  sel.options[sel.length] = item;
  <? } ?>
  cellRightSel1.appendChild(sel);

  var cellRightSel2 = row.insertCell(2);
  var sel = document.createElement('select');
  sel.name = 'class' + iteration;
  sel.setAttribute("onchange", "choosepoint(this);");    
  var item = new Option ("","");
  sel.options[sel.length] = item;
    <?
    while($data = mysql_fetch_array($result_sub)){                                    
    ?>
  var item = new Option("<?=$data["Class"];?>","<?=$data["ID"];?>");
  sel.options[sel.length] = item;
  <? } ?>
  cellRightSel2.appendChild(sel);

  var cellRight = row.insertCell(3);
  var div = document.createElement('div');
  div.id = 'point' + iteration;
  cellRight.appendChild(div);
}


function removeRow(){
  var tbl = document.getElementById('table');
  var lastRow = tbl.rows.length;
  var rem = lastRow - 1;
  if (lastRow > 2) tbl.deleteRow(rem);
}

Help is appreciated, thanks.

My solved problems:

function removeRow(t){
      var i = t.parentNode.parentNode.rowIndex;
      var tbl = document.getElementById('table');
      var lastRow = tbl.rows.length;
      var iteration = lastRow - 1;
      tbl.deleteRow(i);
    }

A global var named i? Inline event handler? Have you considered using jQuery? (Actually, before people like Raynos complain about suggesting jQuery, you can also improve that without jQuery - but why write more code than encessary) — ThiefMaster
– ThiefMaster, Commented Feb 21, 2012 at 16:16

dku.rajkumar · Accepted Answer · 2012-02-21 17:16:38Z

3

try it like this

<tr onclick="removeRow(this);">...</tr>

then in javascript method

function removeRow(row){
  var tbl = row.parentNode;
  var index = row.parentNode.rowIndex;
  if (index > 2) tbl.deleteRow(index);
}

I found one good example suitable your requirement. check here

edited Feb 21, 2012 at 17:16

answered Feb 21, 2012 at 16:32

dku.rajkumar

18.6k8 gold badges43 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

candies Over a year ago

Thanks Mr.rajkumar, I have figured out the problems :)

Jordan · Accepted Answer · 2012-02-21 16:17:14Z

0

This is the code that needs to be changed:

  var rem = lastRow - 1;

Right now, that's always going to be the last row. You can build some logic around that to pass in an index, or hunt for a string, or whatever, but tbl.deleteRow() needs to delete at a particular index.

If you wanted to delete the 3rd row, for example:

var rem = 2; //zero-based index

answered Feb 21, 2012 at 16:17

Jordan

32.7k6 gold badges59 silver badges67 bronze badges

Collectives™ on Stack Overflow

How to delete a row in Javascript?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related