TA貢獻(xiàn)1880條經(jīng)驗(yàn) 獲得超4個(gè)贊
您可以使用 JavaScript 的 onclick 事件和節(jié)點(diǎn)來復(fù)制組件和刪除組件。
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>
當(dāng)您單擊“添加更多”按鈕時(shí)，它將觸發(fā)moreFields().?在該函數(shù)內(nèi)部，它保留當(dāng)前使用該變量創(chuàng)建的行的計(jì)數(shù)counter。然后，它創(chuàng)建元素 ID: 內(nèi)元素的副本readroot，并將其附加到 ID: 的元素部分writeroot。
當(dāng)您單擊具有“x”值的按鈕時(shí)，它將觸發(fā)一個(gè)removeChild()函數(shù)并刪除連接到“x”按鈕的行。
舉報(bào)