How clear textarea not using .val('')

Question

 $('button').click(function(){ $(this).parent().before('<div class="comment_box_all"><div class="comment_user"></div></div>') var content = document.createElement("span"); content.innerHTML=$(".textarea").val().replace(/(\\n|\\r|\\r\\n)/g, '<br>'); $('.comment_user').append(content); }); $(document).on("click", "button", function() { $(this).closest('.comment_panel').find('.textarea').val('') }); $('button').attr('disabled',true); $('.textarea').keyup(function(){ if($(this).val().length !=0) $('button').attr('disabled', false); else $('button').attr('disabled',true); }); 

 .comment_panel { width:450px; height:100px; } textarea { width:300px; height:80px; } button { top:10px; left:330px; } .comment_box_all { width:450px; height:100px; background-color:#999; border:1px solid #000; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="comment_panel"> <textarea class="textarea" placeholder="Add text..."></textarea> <button>Add comment</button> </div> 

Could you help me how I can clear textarea after click button not using .val(''), because look, I would like disabled button when textarea is empty but this happen only in first add text, if I add text next time in textarea is '' and button is active

Answer 1

You can just add the disabled class every time the add button is clicked as you were doing for the first time .

$(this).attr('disabled',true);

Add this line inside the button onclick function.

 $('button').click(function(){ $(this).parent().before('<div class="comment_box_all"><div class="comment_user"></div></div>') var content = document.createElement("span"); content.innerHTML=$(".textarea").val().replace(/(\\n|\\r|\\r\\n)/g, '<br>'); $('.comment_user').append(content); }); $(document).on("click", "button", function() { $(this).closest('.comment_panel').find('.textarea').val('') $(this).attr('disabled',true); }); $('button').attr('disabled',true); $('.textarea').keyup(function(){ if($(this).val().trim().length !=0) $('button').attr('disabled', false); else $('button').attr('disabled',true); }); 

 .comment_panel { width:450px; height:100px; } textarea { width:300px; height:80px; } button { top:10px; left:330px; } .comment_box_all { width:450px; height:100px; background-color:#999; border:1px solid #000; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="comment_panel"> <textarea class="textarea" placeholder="Add text..."></textarea> <button>Add comment</button> </div>