时间戳

首页 > 解决方案 > 清除动态添加/删除输入的输入值

javascript - 清除动态添加/删除输入的输入值

问题描述

我有输入元素，可以在单击按钮时清除值。此输入也可以动态添加或删除输入元素。但是我在添加输入元素后被卡住了，清除按钮不起作用。

这是我到目前为止在这里尝试过的

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

第一个输入运行良好，但添加输入元素后没有出现清除按钮。

请帮忙。

标签： javascriptjqueryhtmlcss

解决方案

.on如下图使用。之后添加的元素没有与您需要的功能绑定。

更新功能

$(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>

推荐阅读