使用 JavaScript 添加和删除（特定）表单元素

Question

我有一个文本区域，旁边有两个按钮：“添加另一个文本区域”和“删除此文本区域”

这是我的html代码：

<div id="summaryIn">
                            <label for="">Summary of Experience:</label> 
                            <textarea class="TA1" name="mySummary[]" value=""></textarea>
                            <button class="adddel" name="cmdDelSummary[]" id="cmdDelSummary" title="Delete this Summary" onClick="DelSummary('summaryIn');">-</button> 
                            <button class="adddel" id="cmdAddSummary" title="Add Another Summary" onClick="AddSummary('summaryIn');">+</button>
                        </div>

我用于添加文本区域的javascript函数工作正常，但是删除按钮不能很好地工作，这里是javascript 代码：

function DelSummary(divName){
alert(summary_counter);
if (summary_counter == 1)
{
    document.getElementById('cmdDelSummary').disabled=true;
}
else
{
    summaryIn.removeChild(summaryIn.lastChild);
    summary_counter--;
    //alert(summary_counter);
}

}

我已经尝试解决这个问题很长时间了，但直到现在我还没有找到任何解决方案。 。 .我不知道如何索引/引用附加删除按钮，以便removeChild仅删除该特定文本区域，而不总是删除最后一个Child..提前非常感谢:)

Answer 1

我认为你必须

summaryIn = document.getElementById(divName);

在之前添加

summaryIn.removeChild(summaryIn.lastChild);

Answer 2

这行：

summaryIn.removeChild(summaryIn.lastChild);

似乎依赖于将元素名称和 id 放入引用该元素的全局变量的实践。这是一种非标准做法，尚未被所有浏览器实现。

而是使用符合标准的：

var  summaryIn = document.getElementById('summaryIn');

现在您可以调用其 removeChild 方法。您可能还应该对要删除的内容进行一些检查，因为最初“添加另一个摘要”按钮是最后一个子元素。

编辑

按照惯例，以大写字母开头的函数名称是为构造函数保留的，所以我使用了小写字母。

要从文档中删除 div 及其内容：

// Go up DOM until reach parent element with tagName
// If no such node found, return undefined.
function upTo(el, tagName) {
  tagName = tagName.toLowerCase();

  while (el.parentNode) {
    el = el.parentNode;

    if (el.tagName.toLowerCase() == tagName) {
      return el;
    }
  }
}

function delSummary(el){
  var div = upTo(el, 'div');
  div.parentNode.removeChild(div);
}

并像这样调用它：

  <button ... onclick="delSummary(this);" ...>-</button> 

虽然 HTML 属性名称不区分大小写，但我发现使用驼峰式大小写会使它们难以阅读，因此使用小写。