Clear input value on dynamically add/remove inputs

  • A+
Category:Languages

I have input element that can clear value when click the button. Also this input can be dynamically adding or remove input element. But I am stuck with when after add input element, the clear button is not working.

This is what I tried so far here

// ADD , Remove input var counter = 1,   custom = $('#custom'); $(function() {   $('#add_field').click(function() {     counter += 1;     var newRow = $('<div class="row' + counter + '"><span class="wrap_input"><input id="exception_' + counter + '" name="" type="text"><button class="btn_clear">clear</button><button class="remove-text-box">Remove</button></span></div>');     custom.append(newRow);     (function(index) {       newRow.find('.remove-text-box').click(function() {         custom.find('.row' + index).remove();       });     })(counter);   }); });   // clear input value  $('.wrap_input').each(function() {  var $inp = $(this).find("input"),       $cle = $(this).find(".btn_clear");  $inp.on("input", function(){    $cle.toggle(!!this.value);   });  $cle.on("touchstart click", function(e) {    e.preventDefault();     $inp.val("").trigger("input").focus();     $inp.change();   }); });
.btn_clear { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="add_field" href="#">add input</button>   <div id="custom">      <span class="wrap_input">     <input type="text" value="">     <button class="btn_clear">clear</button>   </span>  </div>

The first input is working well, but after adding input element clear button is not appeared.

Please help.

 


Use .on as shown below. The elements that are being added afterwards are not getting binded with the functions that you need.

Updated function

$(document).on("input", "input", function() {   $(this).next(".btn_clear").toggle(!!this.value); }); $(document).on("touchstart click", ".btn_clear", function(e) {   e.preventDefault();   $(this).prev("input").val("").trigger("input").focus(); }); 
// ADD , Remove input var counter = 1,   custom = $('#custom'); $(function() {   $('#add_field').click(function() {     counter += 1;     var newRow = $('<div class="row' + counter + '"><span class="wrap_input"><input id="exception_' + counter + '" name="" type="text"><button class="btn_clear">clear</button><button class="remove-text-box">Remove</button></span></div>');     custom.append(newRow);     (function(index) {       newRow.find('.remove-text-box').click(function() {         custom.find('.row' + index).remove();       });     })(counter);   }); });  // clear input value   $(document).on("input", "input", function() {   $(this).next(".btn_clear").toggle(!!this.value); }); $(document).on("touchstart click", ".btn_clear", function(e) {   e.preventDefault();   $(this).prev("input").val("").trigger("input").focus(); });
.btn_clear {   display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="add_field" href="#">add input</button>   <div id="custom">    <span class="wrap_input">     <input type="text" value="">     <button class="btn_clear">clear</button>   </span>  </div>

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: