Question

I have a dynamic form that is generated based on javascript. Here’s the relevant javascript:

function addRowToTable()
{ 

  var tbl = document.getElementById('convention');
  var lastRow = tbl.rows.length;
  // if there's no header row in the table, then iteration = lastRow + 1
  var iteration = lastRow;
  var row = tbl.insertRow(lastRow);


 // right cell
  var cellRight = row.insertCell(0);

  var el = document.createElement('textarea');
  el.rows = '2';
  el.cols = '80';
  el.name = 'conventionSkill' + iteration;
  el.size = 40;

    var el2 = document.createElement('input');
  el2.type = 'hidden';
  el2.name = 'conventioni_alt';
  el2.value = iteration;
  el2.size = 40;


  el.onkeypress = keyPressTest;
  cellRight.appendChild(el);
    cellRight.appendChild(el2);


}

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

HTML:

  <table id="convention">
    <tr>
      <td><label>Skill Descriptions:</label></td>
    </tr>

    <tr>
      <td>
      <textarea name='convention_54' rows='2' cols='80'>
text
</textarea></td>

      <td><a href='javascript:void(0)' onclick='removeRowFromTable(54);'><font size=
      '+1'>-</font></a></td>
    </tr>

    <tr>
      <td>
      <textarea name='convention_55' rows='2' cols='80'>
text2
</textarea></td>

      <td><a href='javascript:void(0)' onclick='removeRowFromTable(55);'><font size=
      '+1'>-</font></a></td>

      <td><a href='javascript:void(0)' onclick='addRowToTable();'><font size=
      '+1'>+</font></a></td>
    </tr>
  </table>

I like the add function as it simply adds a new textarea. However, the remove button removes from the bottom of the form up. How can I make it so that removeRowFromTable removes a specific textarea? For example, if I want to delete one of the textareas in the middle, rather than the last one in the form.

Thanks for any suggestions!

Answer 1

In short, you’ll have to find the exact textarea you want to remove (probably by ID).

However, before you go too far down this road hand-rolling ID enumeration and DOM manipulation code, you might want to look at jQuery (http://jquery.com/). jQuery handles oodles of this stuff quite easily via its selector mechanism and will save you from many of the cross-browser headaches you may have if you try to do all this DOM manipulation yourself.

You’ll find a lot of questions about jQuery on SO; for example look at how easy this related- and-simple table manipulation is:

What is the best way to remove a table row with jQuery?

IMHO learning jQuery was a tremendous Javascript productivity boosts for me and my team — it’s well worth the time spent in my experience.