Javascript 动态添加/删除表单字段

当用户点击一个按钮，然后输入到mysql数据库时，我试图添加一些维度字段到表单中，并希望在添加成功后删除这些字段，但我无法得到任何要显示的内容

Javascript:

    var counter = 0;

function moreFields() {
    counter++;
    var newFields = document.getElementById('readroot').cloneNode(true);
    newFields.id = '';
    newFields.style.display = 'block';
    var newField = newFields.childNodes;
    for (var i=0;i<newField.length;i++) {
        var theName = newField[i].name;
        if (theName)
            newField[i].name = theName + counter;
    }
    var insertHere = document.getElementById('writeroot');
    insertHere.parentNode.insertBefore(newFields,insertHere);
}

window.onload = moreFields;

var计数器=0；
函数moreFields（）{
计数器++；
var newFields=document.getElementById（'readroot'）.cloneNode（true）；
newFields.id=''；
newFields.style.display='block'；
var newField=newFields.childNodes；
对于（var i=0；i您用于创建元素的JavaScript有效。您附加事件的方式可以改进。以下是我将如何更新您的JavaScript代码：

var counter = 0;

function moreFields() {
    counter++;
    var newFields = document.getElementById('readroot').cloneNode(true);
    newFields.id = '';
    newFields.style.display = 'block';

    var newField = newFields.childNodes;
    for (var i = 0; i < newField.length; i++) {
        var theName = newField[i].name;
        if (theName) newField[i].name = theName + counter;
    }

    var insertHere = document.getElementById('writeroot');
    insertHere.parentNode.insertBefore(newFields, insertHere);
}

if (window.addEventListener) {
    window.addEventListener('load', moreFields, false);
} else if (window.attachEvent) {
    window.attachEvent('onload', moreFields);
}

var el = document.getElementById('clicker')

if (el.addEventListener) {
    el.addEventListener("click", moreFields, false);
} else {
    el.attachEvent('onclick', moreFields);
}

var计数器=0；
函数moreFields（）{
计数器++；
var newFields=document.getElementById（'readroot'）.cloneNode（true）；
newFields.id=''；
newFields.style.display='block'；
var newField=newFields.childNodes；
对于（变量i=0；i

你的HTML可以改进很多。在这里，我已经关闭了你的标签，它现在正在工作

<div id="readroot" style="display:none;">
    <p>Quantity
        <input type="text" name="iQuantity" size="3" />Weight(kg)
        <input type="text" name="iWeight" size="4" />Length(cm)
        <input type="text" name="iLength" size="4" />* Width(cm)
        <input type="text" name="iWidth" size="4" />* Height(cm)
        <input type="text" name="iHeight" size="4" />
    </p>
</div>
<div id="writeroot"></div>
<input id="clicker" type="button" value="Add another text input" />


数量
重量（千克）
长度（厘米）
*宽度（厘米）
*高度（厘米）

你的HTML代码非常糟糕。你的许多标记都没有关闭。这将使你的应用程序很难正常运行。谢谢，我现在可以让它在页面加载时显示一次输入，但当我单击按钮时，什么都没有发生。我不确定问题可能是什么。
<div id="readroot" style="display:none;">
    <p>Quantity
        <input type="text" name="iQuantity" size="3" />Weight(kg)
        <input type="text" name="iWeight" size="4" />Length(cm)
        <input type="text" name="iLength" size="4" />* Width(cm)
        <input type="text" name="iWidth" size="4" />* Height(cm)
        <input type="text" name="iHeight" size="4" />
    </p>
</div>
<div id="writeroot"></div>
<input id="clicker" type="button" value="Add another text input" />