Remove text from a HTML textbox - html

Question

In my MVC5 web app, I have a textbox that I key comment text into then click a button to add the comment. JavaScript ajax fires off the controller action method that adds the comment to the database returns a partial view with the added comment. Then it rebuilds the HTML. At that point, just want to remove the content that was keyed into the textbox.
Here's the ajax call and where I try to reset the textbox using:
document.getElementById("comment_1").innerText = "Add a Comment Again ...";
.
// For when clicking the addComment button. Adding a new comment.
$('.addComment').on('click', function () {
var postId = $(this).attr('data-id');
var commentMsg = $('#comment_' + postId).val();
var dateTimeNow = new Date();
// An object.
var comment = {
CommentMsg: commentMsg,
CommentedDate: dateTimeNow.toLocaleString()
};
// Call the Comments controllers action method to get add a comment related to the post id. Will show a partial view.
$.ajax({
type: 'POST',
url: '#Url.Action("AddComment", "Comments")',
data: { comment, postId },
success: function (response) {
$('div[class=allComments_' + postId + ']').remove();
// Dynamically building the HTML to hold the comments returned which now includes the added comment.
// The area for the Shared/_MyComments.cshtml to be placed.
var allCommentsArea = $('<div>').addClass('allComments_' + postId);
allCommentsArea.html(response);
allCommentsArea.prependTo('#commentsBlock_' + postId);
// Reset the value in the input textbox.
document.getElementById("comment_1").innerText = "Add a Comment Again ...";
},
error: function (xhr, ajaxOptions, thrownError) {
alert("Critical Error: something is wrong in the call to AddComment! Status: " + xhr.status + ". Error: " + thrownError.toString() + ". Response Text: " + xhr.responseText);
}
});
});
Here's the textbox - whose id will become "comment_1":
<div id="#string.Format("{0}_{1}","commentsBlock", post.PostID)" style="border: 1px solid #f1eaea; background-color: #eaf2ff;">
<div class="AddCommentArea" style="margin-left: 30%; margin-bottom: 5px; margin-top: 8px;">
<input type="text" id="#string.Format("{0}_{1}", "comment", post.PostID)" class="form-control" placeholder="Add a Comment ..." style="display: inline;" />
<button type="button" class="btn btn-default addComment" data-id="#post.PostID"><span class="glyphicon glyphicon-comment" aria-hidden="true"></span></button>
</div>
</div>
Here's the resulting page after I attempt to reset the text box to a different value then I had keyed in.
I does not remove the text I keyed in.
I tried .innerText, .innerHTML and .TextContent
Test result from suggestion:

Answer 1

What you are doing is setting the text of the input to be "Add a Comment Again.." when you really want to be clearing the input text + making the placeholder "Add a Comment Again..". Try changing this code
// Reset the value in the input textbox.
document.getElementById("comment_1").innerText = "Add a Comment Again ...";
to this:
// Reset the value in the input textbox using jquery.
$("#comment_1").val('')
document.getElementById("comment_1").placeholder = "Add a Comment Again ...";
This way, you both clear the old text and also make the placeholder what you want it to be.