单击时从输入中删除字符串?jQuery

Remove string from input on click? jQuery

本文关键字：字符串 jQuery 删除 输入 单击      更新时间：2023-09-26

我正试图编写自己的函数，将用逗号分隔的每个字符串包装在标记中，我已经完成了这项工作，但在"关闭"单击id时，要从输入中删除相应的字符串，这可能吗？

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/

试试这个：

$('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，并仅针对其先前使用.prev()生成标记的input。

演示

更简单的是，使用单击的标记项的索引，并根据按顺序插入的索引从数组中删除相应的项。

$('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
});

演示

您可以随时修改您的点击处理程序以执行以下操作：

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

您只需将元素存储在一个数组中，然后删除那些被其索引点击的元素：

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/

您可以在单击关闭按钮时输入数据。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, ','));
                });
            });

演示：http://jsfiddle.net/7uqEg/

相关文章：