Reset input value when adding or removing inputs dynamically

Question

Reset input value when adding or removing inputs dynamically

Currently, I have an input element that has the capability to clear its value when a button is clicked. Additionally, this input can dynamically add or remove input elements. However, I am facing an issue where after adding an input element, the clear button does not work.

Here is what I have attempted so far:

// JavaScript code for adding and removing input elements
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);
  });
});

// JavaScript code for clearing 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 functioning correctly, however, after adding another input element, the clear button does not appear.

Please assist me in resolving this issue.

javascript jquery html css

Answer 1

Answer №1

Utilize the .on method as illustrated below. The newly added elements are not being properly connected with the required functions.

Revised 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 or remove input fields
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 field 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>

Answer 2

Utilize the .on method as illustrated below. The newly added elements are not being properly connected with the required functions.

Revised 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 or remove input fields
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 field 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>

Answer 3

Answer №2

Here is a code snippet that can be helpful:

// Function to manage input fields
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 clearInputValue function after row creation
        setTimeout(function() {
            clearInputValue();
        }, 0);
    });
});

// Function to 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();
        });
    });
}

Answer 4

Here is a code snippet that can be helpful:

// Function to manage input fields
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 clearInputValue function after row creation
        setTimeout(function() {
            clearInputValue();
        }, 0);
    });
});

// Function to 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();
        });
    });
}

Answer 5

Answer №3

Here is a demonstration of how this can be achieved.

    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>

Answer 6

Here is a demonstration of how this can be achieved.

    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>

Reset input value when adding or removing inputs dynamically

Answer №1

Answer №2

Answer №3

Similar questions

Tips on effectively managing sibling nodes with unique behavior on the initial one

Issue encountered with the ".replaceWith" method not functioning properly when incorporating the "nl2br()" function and inserting the "Enter" key within database text

Issues with jQuery Relative URLs Not Functioning as Expected

Implementing the functionality to allow users to submit and delete comments using AJAX and PHP

Adjust the width of a div based on its height dimension

Identify the key name in an array of objects and combine the corresponding values

Stop the automatic hiding of the sticky header when reaching the bottom of the page

A step-by-step guide on configuring data for aria's autocomplete feature

Vue.js component still not transitioning out despite using mode="out-in"

Is it feasible in Vue to import an scss file with deep selectors into the scoped styles of a component?

The Axios GET call encountered an error with a status code of 404

Generating multiple div elements within an AJAX iteration

Tips for utilizing identical properties across numerous styled elements:

Comprehending the inner workings of the reduce() method

Connect a nearby dependency to your project if it has the same name as an npm repository

Reducing Image Size for Logo Placement in Menu Bar

Exploring how to utilize optional URL parameters within Express.js

receiving an object as the return value in AngularJS

Mastering JQuery: Techniques for Managing Events Across Numerous Elements

Using the power of HTML5, store data locally on