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

我正在尝试编写自己的函数，将每个字符串用逗号分隔，并将其包装在一个标记中，我可以这样做，但是在“close”（关闭）按钮上，我想从输入中删除相应的字符串，这可能吗

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

$（'body'）。在（'click'，'.tag span'，function（）{
$（this.parent（）.hide（）；
});
$（'input'）.keyup（函数（e）{
$（'.result'）.html（''）；
var valueArr=$（this.val（）.split（'，'）；
对于（var i=0；i尝试以下方法：

$('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（）
生成标记


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

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

您可以看到它在
中工作。您只需将元素存储在一个数组中，然后删除被其索引单击的元素：

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);
    });
});

var$tag=$（'×；'）；
var标签=[]；
$（'.result'）。在（'click'，'.tag.close'，函数（）上{
var$parent=$（this.parent（）；
tags.splice（$parent.index（），1）；
$parent.remove（）；
$（'input'）.val（tags.join（'，'））；
});
$（'input'）.keyup（函数（）{
标签=[]
$（'.result'）.empty（）；
$（this.value.split（/\s*，\s*/）。每个（函数（索引，值）{
var tag=$tag.clone（）；
tag.find（'.text'）.text（值）；
tag.appendTo（'.result'）；
标签。推送（值）；
});
});

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

$（'input'）.keyup（函数（e）{
var input=$（this）；/*存储输入对象以插入替换的值*/
$（'.result'）.html（''）；
var valueArr=$（this.val（）.split（'，'）；
对于（变量i=0；i

抱歉@PSL，我认为我的问题措词不正确，我只想从输入中删除匹配的字符串，而不是完全清除输入…@Liam oh你的意思是标签将有一些其他字符串，可能是键入内容的子字符串？所以在输入中键入“foo，bar”这两个单词将被包装在一个div标记中。当你单击foo旁边的X时，我希望“foo”从我的输入中删除，只留下“bar”@Liam同一单词中的使用类型是什么？两次逗号分隔？@Liam看到解决方案了吗？你的问题是用一个更简单的解决方案解决的，这很好@Justin Niessner！谢谢这会弄乱像
foo X，foo Y
这样的文本。@Blender-事实上，它不会。它会删除第一个出现的“X”，留下第二个，从而使一切都保持得体。试一试。我认为这可以简化很多，我有一个解决方案，它也会处理重复项，不会留下逗号。@PSL-我同意，这就是为什么我给了你一个放弃投票。我也更新了我的答案，用逗号做了一些类似的事情。但不确定是否有重复项…并没有测试它。尽管5分钟的代码总是会有一些bug。