Clear input value on dynamically add/remove inputs

Question

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.

it is working fine in your running code snippet. Please check. Or you want to add clear button with each added input field? — DarkRob, Feb 21 '19 at 06:14
I think what @kk-kk wanted is that the clear button should also appear on the added input elements. — Ekown, Feb 21 '19 at 06:15
@DarkRob only first input works fine. But after added input's clear button is not show up. — kk kk, Feb 21 '19 at 06:17

Nandita Sharma · Accepted Answer · 2020-01-23T06:36:54.663

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>

You are welcome. Please accept and upvote the answer if it worked for you so that if someone else faces the same problem in future he/she knows that this solution worked for you. Thanks — Nandita Sharma, Feb 21 '19 at 06:28
Please read this for more info https://stackoverflow.com/help/someone-answers — Nandita Sharma, Feb 21 '19 at 06:30

score 2 · Answer 2 · answered Feb 21 '19 at 06:23

Try to use the following code

// 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);

        // call this method after row creation
        setTimeout(function() {
            clearInputValue();
        }, 0);
    });
});

// clear input value
function clearInputValue() {
    $('.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();
        });
    });
}

Thank you for your help. working perfectly :) – kk kk Feb 21 '19 at 06:31 — kk kk, Feb 21 '19 at 06:31

Stefan Avramovic · Answer 3 · 2019-02-21T12:16:57.770

This is another example of how it can be done.

    function add(){
      //Add
      $(".elements" )
        .append( "<div>\
        <input type='text' class='myinput'>\
        <button class='clear'>clear</button>\
        <button class='remove'>remove</button>\
        </div>" );
       
      init()
      
    }

    function init(){ 
      //Remove
      var x = document.getElementsByClassName('remove')
      for(var i = 0; i< x.length; i++){
          x[i].addEventListener("click", function(e){
            e.target.parentNode.remove()
          })
      }
      
      //Clear
      var y = document.getElementsByClassName('clear')
      for(var i = 0; i< y.length; i++){
          y[i].addEventListener("click", function(e){  
            e.target .parentNode.querySelector("input").value = ''; 
            //after clear hide .clear button 
            e.target.parentNode.querySelector(".clear").style.display = "none";
          })
      }
      
      //Show hide .clear button 
      var z = document.getElementsByClassName('myinput')
      for(var i = 0; i< z.length; i++){
         z[i].addEventListener("input", function(e){    
            if(e.target.value.length > 0){
              e.target.parentNode.querySelector(".clear").style.display = "inline";
            }else{
              e.target.parentNode.querySelector(".clear").style.display = "none";
            }
         })
      }
      
    }

    init();

  .clear{ 
      display:none;
    }

    <script src="https://code.jquery.com/jquery-1.6.4.js"></script>
    <div class="elements">
      <button id="add" onclick="add()">Add</button>
      <div>
        <input class="myinput">
        <button class="clear">clear</button>
      </div> 
     </div>

Clear input value on dynamically add/remove inputs

3 Answers3

Linked

Related