javascript - 使用按钮清除内容

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>

JAVASCRIPT:

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>