如何删除特定的文本区域字段?

Posted

技术标签:

【中文标题】如何删除特定的文本区域字段?【英文标题】:How to delete specific textarea field? 【发布时间】:2011-11-30 02:27:24 【问题描述】:

我有一个基于 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>

我喜欢添加功能,因为它只是添加了一个新的文本区域。但是,移除按钮会从表单底部向上移除。如何使 removeRowFromTable 删除特定的文本区域?例如,如果我想删除中间的一个文本区域,而不是表单中的最后一个。

感谢您的任何建议!

【问题讨论】:

【参考方案1】:

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

但是,在您在手动滚动 ID 枚举和 DOM 操作代码的道路上走得太远之前,您可能需要查看 jQuery (http://jquery.com/)。 jQuery 通过其选择器机制非常容易地处理大量此类内容,如果您尝试自己进行所有这些 DOM 操作,您可能会遇到许多跨浏览器的麻烦。

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

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

恕我直言,学习 jQuery 对我和我的团队来说极大地提高了 Javascript 的工作效率——非常值得花时间在我的经验中。

【讨论】:

感谢您的建议。我正在研究这个问题,但我遇到的问题是每个文本区域都是动态的——我的意思是,每个文本区域将拥有的 ID 将完全不同。所以我不能让 jquery 在不知道元素名称的情况下删除该行,并且 jquery 不会知道元素的名称,除非它在 ​​php 循环内。有什么建议? :\

以上是关于如何删除特定的文本区域字段?的主要内容,如果未能解决你的问题,请参考以下文章

无法在使用脚本放置逗号的文本区域中退格

如何在资源管理器的文本区域中设置占位符的样式?

如何使用 AngularJs 从输入或文本区域中删除特殊字符?

如何在emacs中使用[delete]键删除区域

创建具有自动调整大小的文本区域

如何在 IE 中禁用的文本区域上启用滚动条