为什么不是'我的表格删除了多个条目

Why isn't my form deleting multiple entries?

本文关键字:删除 表格 我的 为什么不      更新时间:2023-09-26

所以我有一个Array,它充满了一堆重复,比如['hey','hey','yeh'],还有一个html表单,如果提交的文本与之匹配,它会从我的数组中删除任何条目。然而,我的JS/jQuery似乎没有按我喜欢的方式运行。每次按下按钮时,似乎只有前几个条目会被删除,而不是所有匹配项(这正是我想要的)。我的"each"函数难道不应该遍历数组中的所有项,并删除所有与提交的内容匹配的条目吗?

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

嘿,我觉得应该是这样的。

$.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

jQuery的.each函数使用一个从0开始的整数对数组进行迭代,以对数组进行索引。当您在发生这种情况时从数组中取出一些东西时,jQuery的索引var不会被告知,您最终会跳过一个项。

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

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

更换此部件:

$.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/