TA貢獻1880條經驗 獲得超4個贊
您可以使用 JavaScript 的 onclick 事件和節點來復制組件和刪除組件。
var counter = 0;
document.getElementById('moreFields').onclick = moreFields;
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;
<div id="readroot" style="display: none">
? ? <input type="button" value="x"
? ? ? ? onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br />
? ? <input name="amount" value="title" />
? ? <select name="items">
? ? ? ? <option>Items</option>
? ? ? ? <option value="cable">Cable</option>
? ? ? ? <option value="rj45">rRJ45</option>
? ? </select>
??
? <select name="type">
? ? ? ? <option>type</option>
? ? ? ? <option value="m">Cable</option>
? ? ? ? <option value="pcs">pcs</option>
? ? </select>
</div>
<form method="post" action="/cgi-bin/show_params.cgi">
? ? <span id="writeroot"></span>
? ? <input type="button" id="moreFields" value="Add more" />
</form>
當您單擊“添加更多”按鈕時，它將觸發moreFields().?在該函數內部，它保留當前使用該變量創建的行的計數counter。然后，它創建元素 ID: 內元素的副本readroot，并將其附加到 ID: 的元素部分writeroot。
當您單擊具有“x”值的按鈕時，它將觸發一個removeChild()函數并刪除連接到“x”按鈕的行。
舉報