我希望能够将多个行添加到div并删除它们。我在页面顶部有一个“ +”按钮,用于添加内容。然后,每行右侧都有一个“-”按钮,用于删除该行。我只是无法弄清楚此示例中的javascript代码。
这是我的基本HTML结构:
<input type="button" value="+" onclick="addRow()"> <div id="content"> </div>
这是我想在内容div中添加的内容:
<input type="text" name="name" value="" /> <input type="text" name="value" value="" /> <label><input type="checkbox" name="check" value="1" />Checked?</label> <input type="button" value="-" onclick="removeRow()">
你可以做这样的事情。
function addRow() { const div = document.createElement('div'); div.className = 'row'; div.innerHTML = ` <input type="text" name="name" value="" /> <input type="text" name="value" value="" /> <label> <input type="checkbox" name="check" value="1" /> Checked? </label> <input type="button" value="-" onclick="removeRow(this)" /> `; document.getElementById('content').appendChild(div); } function removeRow(input) { document.getElementById('content').removeChild(input.parentNode); }