为什么我的表单没有删除多个条目?

时间:2012-08-19 22:08:46

标签: javascript jquery forms

所以我有一个Array,其中包含一堆重复内容,例如['hey','hey','yeh'],我有一个html表单,如果提交的文本与之匹配,则会从我的数组中删除任何条目。但是,我的JS / jQuery似乎没有按照我喜欢的方式运行。每次按下按钮时,只有前几个条目似乎删除,而不是所有匹配(这是我想要的)。我的“每个”函数不应该遍历我的数组中的所有项目并删除所有与提交的内容匹配的条目吗?

HTML:

<form id="remove_user" action="#" method="post">
        <label for="user_num">Remove user:</label>
        <input type="text" id="user_num" name="user_num" placeholder="number">
        <input type="submit" value="(-) remove">
    </form><!-- #remove_user -->

    <ul id="user_list"></ul><!-- #user_list -->

JS通过更改进行了更新,但仍无效:

$('#remove_user').submit(function(){
    id = $('#user_num').val();
    $.each(myArr, function(i, value){
        if (value == id){
            myArr.splice(i, 1);
        };
    });
    $('#user_list').html('');
    for (var i=0; i < myArr.length; i += 1) {
        $('#user_list').append('<li>' +myArr[i]+ '</li>');
    };
    return false;
});

3 个答案:

答案 0 :(得分:2)

嘿,我认为这应该是这样的。

$.each(myArr, function(i, value){
    if (value == id){
        // delete myArr[myArr.indexOf(value)];
        myArr.splice(i, 1); //i is current index

};

修改

$('#remove_user').submit(function() {
id = $('#user_num').val();
$.each(myArr, function(i, value) {
    if (value == id) {
        myArr.splice(i, 1, '');
    };
});

FIDDLE

答案 1 :(得分:0)

替换此部分:

$.each(myArr, function(i, value){
        if (value == id){
            // delete myArr[myArr.indexOf(value)];
            myArr.splice(myArr.indexOf(value), 1);
};

使用$.grep

myArr = $.grep(myArr, function(value) {
  return value != id;
});

使用.splice$.inArray还有一种更美妙的方法:

var myArr = ['le', 'le', 'la']
var removeItem = 'la';

myArr.splice($.inArray(removeItem, myArr), 1);

// Will print only 'le', 'le'
alert(myArr);

这是一个jsFiddle供您尝试:http://jsfiddle.net/leniel/4zENw/2/

答案 2 :(得分:0)

jQuery的.each函数使用从0开始的整数迭代数组,以索引它们。当你发生这种情况时从数组中取出一些东西时,jQuery的索引变量不会被告知它,你最终会跳过一个项目。

如果从数组的另一端迭代,这不是问题;

var i = myArr.length;
while (i--) {
    if (myArr[i] === value) {
        myArr.splice(i, 1);
    }
}