Clear content with button

user_7493971 0
Viewed 3362

I am able to save user data from input field into paragraph, but I want to delete the contents of the paragraph with a click of button.

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 = "";
}
html javascript
4 Answers

I think the problem here is the clear() function name, it's not a reserved word, but it will invoke document.clear in the first place, so try any other name for your function:

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>

Update

To remove the inserted data one by one, you need to create an event listener for each created element, a simple implementation would be (remove element on click):

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>

user_13719950

It seems clear will call document.clear. Change the function name to something else

let dom = document.getElementById('result');

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

function clearVal() {
  dom.innerHTML = "";
}
<input type="text" id="name" placeholder="enter">
<br>
<button id="btn" onclick="fn()">click</button>
<div>
  <p id="result"></p>
</div>
<button onclick="clearVal()">clear</button>

user_21813970

clear method of the window object will be called. Therefore, you are not able to see the changes. Rename your function except clear

In order to reset the input, you can use document.getElementById('name').reset().

var randkey=0;
function fn(){
  var Name = document.getElementById('name').value;
  randKey = Math.floor(Math.random()*999);
  document.getElementById('result').innerHTML +=  '<div id='+randKey+'>' + Name +'<br><button onclick=cleardd('+randKey+')>clear</button></div>';
  
}
function cleardd(randKey){
  document.getElementById(randKey).remove();
}
<input type="text" id="name" placeholder="enter">
<br>
<button id="btn" onclick="fn()">click</button>
<div id="result">
</div>

user_77502890

Please use any name other than clear. I think it is a keyword.

function fn(){
    var Name = document.getElementById('name').value;
    document.getElementById('result').innerHTML += '<br>' + Name;
}
function clearText(){
    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="clearText()">clear</button>

user_119347480
Related