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