用按钮清除内容

Question

我可以将输入字段中的用户数据保存到段落中，但我想通过单击按钮删除段落的内容。

HTML：

<input type="text" id="name" placeholder="enter">
<br>
<button id="btn" onclick="fn()">click</button>
<div>
    <p id="result"></p>
</div>
<button onclick="clear()">clear</button>

爪哇脚本：

function fn(){
    var Name = document.getElementById('name').value;
    document.getElementById('result').innerHTML += '<br>' + Name;
}
function clear(){
    document.getElementById('result').innerHTML = "";
}

Answer 1

我认为这里的问题是clear()函数名称，它不是保留字，但它会document.clear首先调用，因此请为您的函数尝试任何其他名称：

function fn(){
    var Name = document.getElementById('name').value;
    document.getElementById('result').innerHTML += '<br>' + Name;
}
function clearContent(){
    document.getElementById('result').innerHTML = '';
}

<input type="text" id="name" placeholder="enter">
<br>
<button id="btn" onclick="fn()">click</button>
<div>
    <p id="result"></p>
</div>
<button onclick="clearContent()">clear</button>

更新

要逐个删除插入的数据，您需要为每个创建的元素创建一个事件侦听器，一个简单的实现是（在单击时删除元素）：

function fn() {
  var Name = document.getElementById('name').value;

  var paragraph = document.createElement('p');
  paragraph.innerHTML = Name + ' (X)';

  paragraph.onclick = function(el) {
    el.target.remove();
    return false;
  };

  document.getElementById('result').appendChild(paragraph);
}

function clearContent(){
    document.getElementById('result').innerHTML = '';
}

<input type="text" id="name" placeholder="enter">
<br>
<button id="btn" onclick="fn()">click</button>
<div>
  <p id="result"></p>
</div>
<button onclick="clearContent()">clear</button>