如何删除特定的textarea字段？

Question

我有一个基于javascript生成的动态表单.这是相关的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>

我喜欢add函数,因为它只是添加了一个新的textarea.但是,删除按钮会从表单底部删除.我怎样才能使removeRowFromTable删除特定的textarea？例如,如果我想删除中间的一个textareas,而不是表单中的最后一个.

谢谢你的任何建议!

Answer 1

简而言之,您必须找到要删除的确切文本区域(可能是ID).

但是,在你走过这条道路手动ID枚举和DOM操作代码之前,你可能想看看jQuery(http://jquery.com/).jQuery通过它的选择器机制很容易处理这些东西的大部分,如果你试图自己做所有这些DOM操作,你将免于许多跨浏览器的麻烦.

你会在SO上发现很多关于jQuery的问题; 例如,看看这个相关和简单的表操作是多么容易:

使用jQuery删除表行的最佳方法是什么？

恕我直言学习jQuery对我和我的团队来说是一个巨大的Javascript生产力提升 - 非常值得花费在我的经验上的时间.