我希望能够向一个 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);
}
关于javascript - 使用 JavaScript 在 div 中添加/删除 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17650776/