Question

我正在尝试为每个值添加清除按钮，我想从链值中删除满足值/文本。

<input id="value" />
<div id="show"></div>

$('#value').on('keyup input paste',  function(){
   var show=$(this).val().split(',').join('<br/>'); 
   $('#show').html(show); });

输出：

demo1 {
{1}}

需要输出：

demo2 {
{1}}

当我点击每个清除按钮时，我想从输入中删除满足值。

Answer 1

试试这个：

<input id="value" />
<div id="show"></div>
<script>
$('#value').on('keyup input paste',  function(){
    var show=$(this).val().split(',');
    var temp="";

    for (i=0; i<show.length; i++)
    {
        if(show[i]!="")
        {
            temp += '<div><span>'+show[i]+'</span><a href="#" class="clear">clear</a></div>';
        }
    }
    $('#show').html(temp); 
});

$('#show').on('click','.clear',function(){
    Object.prototype.getKey = function( value ) {
    for( var p in this ) {
        if( this.hasOwnProperty( p ) ) {
             if( this[ p ] === value )
                 return p;
            }
        }
    }

    var val = $(this).parent().find('span').html();
    var temp =$("#value").val();
    temp = temp.split(',');
    temp = temp.filter(function(v){return v!==''});
    var k = temp.getKey(val);
    delete temp[k];
    temp = temp.filter(function(v){return v!==''});
    $("#value").val(temp);
    $(this).parent().remove();
    $("#value").keyup();
});
</script>

JSfiddle Demo

Answer 2

像这样？

   $('#value').on('keyup input paste',  function(){
   var show=$(this).val().split(',').join('<br/>'); 
   var btn="<a href='#' id='btn_"+this.id+"'>clear_button1</a>";
   $('#show').html(show+btn); 
   $('#btn_'+this.id).click(function(){
      $('#value').val('');
      $('#show').text('');
   })
  });

如何使用jquery为每个值动态添加清除按钮？

2 个答案: