Question

有人请帮我如何添加新功能删除字段，我有js脚本功能添加新字段如下

<script language="javascript">
fields = 0;
function addInput() {
    if (fields != 10) {
        var htmlText =  "&nbsp;&nbsp;<input type='text' name='friends[]' value='' size='auto' maxlength='45' /><br />";
        var newElement = document.createElement('div');
        newElement.id = 'new_field';
        newElement.innerHTML = htmlText;

        var fieldsArea = document.getElementById('new_field');
        fieldsArea.appendChild(newElement);
        fields += 1;

    } else {
        alert("Only 10 fields allowed.");
        document.form.add.disabled=true;
    }
} 
</script>

但我需要一些帮助来添加删除字段的新功能，对于任何建议和指针，我将不胜感激。

Answer 1

在此处阅读removeChild（）函数removeChild() - mozilla developer

编辑或此处：removeChild() w3schools

Answer 2

首先，我的代码已经出现了一个问题。您将每个新字段的ID设置为相同的值，这是无效的HTML并且要求解决问题。一定要解决这个问题。

DOM元素的.removeChild method是您想要的。仅当传入的节点实际上是该元素的子节点时，.removeChild才会从DOM树（实际包含在文档中的元素集）中删除节点（元素或文本），否则会发生错误。

您可以通过查找其容器的last child轻松删除最后一个字段：

function removeLastField() {
    var fieldsArea = document.getElementById('new_field'),
        lastChild = fieldsArea.lastChild;
    if(lastChild) {
        fieldsArea.removeChild(lastChild);
        fields -= 1;
    }
}

如何删除通过JavaScript插入的输入字段

2 个答案: