How do I clear a textarea with jquery

Question

This question has been answered, but for future reference here is a full example.

You can click the add button and clear button as many times as you want and it will work. But once you type something in the text box, then the clear and and add buttons do not work.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){

    $("#add").click(function(){

        $("#box").append("Test, ")
    });

    $("#clean").click(function(){
        $("#box").text("")
    });

});
</script>
</head>
<body>

<button id="add">ADD</button><br/>
<textarea rows="10" cols="50" id="box"></textarea><br/>
<button id="clean">Clear Box</button>

</body>
</html>

for those having problem with event handlers, here is a workaround answer. https://stackoverflow.com/questions/8284960/clear-text-area/54265441#54265441 — Neo, Jan 19 '19 at 08:51

score 9 · Accepted Answer · answered Aug 16 '16 at 21:31

When dealing with elements that expect input from the user you should use jQuery's val function:

$(function() {
  $('#b1').click(function() {
      $("#textarea").val($("#textarea").val() + "This is a test");
  });
  $('#c1').click(function() {
    $("#textarea").val("")
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="textarea"></textarea><br />
<button id="b1">Append</button> <button id="c1">Clear</button>

The append function changes the DOM, and this is not what you are trying to do here (This is what breaks the default behavior of the textarea element).

Thank you so much. That issue was driving me crazy. – user1854438 Aug 17 '16 at 15:31 — user1854438, Aug 17 '16 at 15:31

How do I clear a textarea with jquery

1 Answers1

Linked