單擊時從輸入中刪除字符串？ jQuery

我試圖寫我自己的函數來包裝每個字符串用逗號分隔的標籤，我有這個工作，但在'關閉'點擊id像從輸入中刪除相應的字符串，這是可能的在所有？單擊時從輸入中刪除字符串？ jQuery

jQuery的

$('body').on('click', '.tag span', function(){ 
    $(this).parent().hide(); 
}); 
$('input').keyup(function(e) { 
     $('.result').html(''); 
     var valueArr = $(this).val().split(','); 
     for(var i=0; i<valueArr.length; i++){$('.result').append('<div class="tag">'+valueArr[i]+'<span> X</span></div>')}; 
});

http://jsfiddle.net/Liamatvenn/7huQ4/1/

來源

2013-07-10 Liam

你可以隨時修改自己的點擊處理程序做這樣的事情：

$('body').on('click', '.tag span', function(){ 
    var $this, $input, val, arr; 
    $this = $(this); 
    $input = $('input'); 
    arr = $input.val().split(','); 
    val = $this.parent().text().replace(' X',''); 
    arr.splice(arr.indexOf(val), 1); 
    $input.val(arr.join(',')); 
    $this.parent().hide(); 
});

你可以看到它在http://jsfiddle.net/eF5ev/

來源

2013-07-10 18:36:43

這很棒@Justin Niessner！謝謝 – Liam

這會弄亂像'Foo X，Foo Y'這樣的文字。 – Blender

@Blender - 事實上，它不會。它會刪除第一個出現的'X'並離開第二個，從而使所有事情都保持完好。在小提琴中給它一個鏡頭。 –

試試這個：

$('body').on('click', '.tag span', function(){ 
    $(this).parent().hide(); 
    $(this).closest('.result').prev('input').val(""); //get the input respective to the clicked close button. 
});

.closest()將讓你的父母.result和目標只有它以前input其產生利用.prev()標籤。

Demo

簡單得多，被點擊的標籤項的使用索引並且當它們被插入在該順序本身從基於相同的索引數組中刪除該相應項目。

$('body').on('click', '.tag span', function() { 
    var $parent = $(this).closest('.tag'); 
    var index = $parent.index(); //Get the index of the `tag` 

    $(this).closest('.result').prev('input').val(function (_, value) { //use val function argument 
     var values = value.split(','); //split the value 
     values.splice(index, 1); //remove the item from array 
     return values.join(','); //join them back 
    }); 

    $parent.remove(); //then remove your tag 
});

Demo

來源

2013-07-10 18:26:10 PSL

對不起@PSL，我不認爲我正確的措辭我的問題，我只想從輸入刪除匹配的字符串，而不是清除輸入完全... – Liam

@Liam哦你的意思是這個標籤會有一些其他的字符串，可能是輸入內容的子字符串？ – PSL

所以說，在你輸入的內容中，「foo，bar」這兩個單詞將被包裹在一個div標籤中。當你點擊foo旁邊的X時，我想'foo'從我的輸入中刪除，只留下'bar' – Liam

工作，就可以只儲存你的元素在一個數組中，並刪除那些被其索引點擊的數字：

var $tag = $('<div class="tag"><span class="text"></span><span class="close">&times;</span></div>'); 
var tags = []; 

$('.result').on('click', '.tag .close', function() { 
    var $parent = $(this).parent(); 

    tags.splice($parent.index(), 1); 
    $parent.remove(); 

    $('input').val(tags.join(', ')); 
}); 

$('input').keyup(function() { 
    tags = [] 
    $('.result').empty(); 

    $(this.value.split(/\s*,\s*/)).each(function(index, value) { 
     var tag = $tag.clone(); 

     tag.find('.text').text(value); 
     tag.appendTo('.result'); 

     tags.push(value); 
    }); 
});

演示：http://jsfiddle.net/7huQ4/9/

來源

2013-07-10 18:47:42 Blender

你可以在關閉按鈕，點擊輸入數據。 jquery text（）方法在標籤內獲取文本。從輸入數據中刪除該文本。然後用正則表達式刪除前導和尾隨逗號。

試試這個。

$('input').keyup(function(e) { 
       var input = $(this); /* Store input object for replaced value insertion */ 
       $('.result').html(''); 
       var valueArr = $(this).val().split(','); 

       for (var i = 0; i < valueArr.length; i++) { 
        $('.result').append('<div class="tag">' + valueArr[i] + '<span> X</span></div>'); 
       } 
       $('span').click(function() { 
        /* Removal of unwanted string like ' X' (close button) */ 
        var data = $(this).parent().text(); 
        data = data.replace($(this).text(), ""); /* Basic javascript replace() function*/ 
        /* Delete unwanted commas, Store modified string to input field */ 
        input.val(input.val().replace(data, '') 
             .replace(/^[,\s]+|[,\s]+$/g, '') 
             .replace(/,[,\s]*,/g, ',')); 
       }); 
      });

demo : http://jsfiddle.net/7uqEg/

來源

2013-07-10 20:16:30 way2vin

單擊時從輸入中刪除字符串？ jQuery

回答

相關問題