javascript - 使用 JavaScript 在 div 中添加/删除 HTML

Question

我希望能够向一个 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()">

Answer 1

你可以这样做。

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