从列表中删除元素 - JQuery/JavaScript答案

【问题标题】：Remove element from list - JQuery/JavaScript从列表中删除元素 - JQuery/JavaScript
【发布时间】：2011-06-13 01:07:28
【问题描述】：

我在 div 中有一个这样的列表：

<div id="x">5,2,3,1,4,9,8</div>

如何简单地从此列表中删除给定元素？可以使用 JQuery 或 JavaScript。

请注意，列表中的数字是唯一的，它们来自 int(11) 类型的数据库，它们没有任何顺序。

任何帮助感谢大家...

【问题讨论】：

标签： javascript jquery list element

【解决方案1】：

用等于 5、3 或 8 的 toRemove 试试这个，看看它是否适用于所有情况：

var toRemove = 3; // the number you want to remove
$('#x').text($('#x').text().replace(new RegExp(toRemove + ',?'
                                               + '|,?' + toRemove + '$'), ''));

See example →

【讨论】：

+1，但你的正则表达式很糟糕。它将匹配33, 之类的内容。使用new RegExp('[^,]' + toRemove + '(?=[$,])')
你说得对，我很抱歉。如果你回答，我会删除我的并为你 +1。
实际上，刚刚意识到我发布的正则表达式不太适用。你的实际上更接近于需要的 :) new RegExp('(^|,)' + toRemove + ',|,' + toRemove + '$') 并替换为 $1

【解决方案2】：

首先，获取文本：

var text=$("#x").text();

然后拆分：

var items=text.split(',');

如果没有项目，您将有一个空字符串作为数组的唯一元素。如果是，则清空数组：

if(items.length==1&&items[0]=="") {
    items=[];
}

现在将所有内容都转换为整数：（请注意，这一步实际上并不是必需的，但如果您正在使用items 做其他事情，那就太好了）

items=items.map(function(str) { return parseInt(str, 10); });

将要删除的项目放入变量中：

var itemToRemove=3;

在数组中找到它：

var index=items.indexOf(itemToRemove);

如果找到了，就拼接出数组：

if(index!==-1) {
    items.splice(index, 1);
}

将项目重新组合在一起：

text=items.join(',');

放回元素中：

$("#x").text(text);

【讨论】：

【解决方案3】：

使用 jQuery 的 grep 方法也可能是一种选择：

var toRemove=1; 
$('#x').text( $.grep($('#x').text().split(','),
                     function (a) { return a != toRemove; }).join(','));

要删除多个项目：

var toRemove=[1,8,3]; 
$('#x').text( $.grep($('#x').text().split(','),
                     function (a) { return $.inArray(Number(a),toRemove)<0; })
                       .join(','));

（但我更喜欢 RegExp 解决方案，它应该更快）

【讨论】：

【解决方案4】：

这是一个简单的解决方案，只需要 jquery。

function removeFromDiv(which)
{
    var data = $("#x").html();
    data_arr = data.split(",");
    for (var i = 0; i < data_arr.length; i++)
    {
        if (data_arr[i] == which)
        {
            data_arr.splice(i, 1);
            data = data_arr.join(",");
        }
    }
    $("#x").html(data);
}

然后简单地运行：

removeFromDiv("4");

【讨论】：

你不应该在数组上使用for...in；如果有人扩展了Array.prototype，它也会遍历这些属性。
有趣，那么迭代数组的解决方案是什么？
@two13：如果您不修改阵列，请在阵列上调用forEach（但请注意，某些较旧的浏览器不支持forEach），或者使用for(var i=0, l=myArray.length; i<l; i++)。
@two13：哦，我忘了另一件事。如果您使用的是缓存长度的东西，那么当您删除一个元素时，您必须减少 l。或者，不缓存长度，你可以使用这个：for(var i=0; i<myArray.length; i++)
@icktoofay 两个版本在我的测试中工作相同。删除后它似乎不会影响数组长度，并且无论我使用哪个版本，它仍然可以正确地遍历数组。是否存在其中一个会破裂的情况？ edit 没关系，我看到它在第一个版本中抛出错误，因为数组太长，明白了，会更新。 :)

【解决方案5】：

真的不需要比这更难：

function removeIndexFromX(index) {
  // Build array from comma-delimited content
  var arr = $("#x").text().split(',');

  // Remove index (zero-based)
  arr.splice(index, 1);

  // Replace
  $("#x").text(arr.join(','));
}

function removeNumberFromX(num) {
  var arr = $("#x").text().split(',');
  for (var i = 0; i < arr.length; i++) {
    if (arr[i] === num) {
      arr.splice(i, 1);
    }
  }

  $("#x").text(arr.join(','));
}

split 和 join 的好处是您可以使用它们来为您管理分隔符（例如逗号）。

【讨论】：