How to clear pre tag in html

Question

I use the HTML PRE tag and I need to click to clear its contents. I tried the following without success.

$('#display').clear;
$('#display').val("");

In the html index, I use it like this:

<pre id="display"></pre>

Answer 1

You used $('selector').val(''), and this is for input fields, and will not work here!

I suggest you use one of the following methods:

$(document).ready(function(){

$("#delete-1").click(function(){
  $('#display1').html('');
});

$("#delete-2").click(function(){
  document.getElementById('display2').innerHTML ="";
});


$("#delete-3").click(function(){
  $('#display3').empty();
});

  
$("#delete-4").click(function(){
  $('#display4').text('');
});

  
  
 



})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre id="display1">
  
  Here is pre content
</pre>

<br/>
<pre id="display2">
  
  Here is pre content
</pre>

<br/>
<pre id="display3">
  
  Here is pre content
</pre>
<br/>
<pre id="display4">
  
  Here is pre content
</pre>

<br/>
<a id="delete-1" href="#">Delete #1</a>
<a id="delete-2" href="#">Delete #2</a>
<a id="delete-3" href="#">Delete #3</a>
<a id="delete-4" href="#">Delete #4</a>

Run codeHide result

Answer 2

Use html("")to clear contents.

 $('#display').html("");

Answer 3

jquery, :

<script>
$( "#display" ).empty();
</script>

, jquery.

Answer 4

javascript

document.getElementById('display').innerHTML ="";

, .

Answer 5

$('#display').html("");

.
https://fiddle.jshell.net/75fLkhmz/

Answer 6

$('#display').text('');