動態添加/刪除表單字段

Question

我正在嘗試添加，並希望在添加作品后刪除，當用戶單擊按鈕然后將其輸入到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;

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"></div>
    <span id="writeroot"></span>

    <input type="button" value="Add another text input" onClick="moreFields();">

任何幫助，不勝感激，謝謝

Answer 1

您的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);
}

而且您的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" />