我希望能够单击列表项(由数组项构成)并从阵列中永久删除它。我可以在使用remove()单击时删除它,但是当我向数组中添加另一个项目时,项目会显示回来,再加上我刚刚添加的新项目。
JSFIDDLE帐户:http://jsfiddle.net/trav5567/3s64o1ta/1/
的Javascript
function testArray(){
var Fruit = ['apple', 'bannanna', 'rasberry', 'watermelon', 'grape', 'orange'];
function initArray(){
loopArray();
}initArray();
function myFruit(){
$('#addFruit').on('click', function(e) {
e.preventDefault();
var flag = true;
var val = $('#fruitAdd').val();
for(var i = 0 ; i < Fruit.length ; i ++){
if(Fruit[i] == val){
flag = false;
console.log('already entered this item');
}
}
if(flag){
Fruit.push(val);
loopArray();
}
});
}myFruit();
function loopArray(){
var fruitList = $('ul.fruit');
var arrayContainer = $('.arrayContainer');
fruitList.empty();
for(var i = 0; i< Fruit.length; i++){
fruitList.append('<li>'+Fruit[i]+'</li>');
}
}
function removeItem(){
var itemClicked = $('ul.fruit li');
itemClicked.on('click', function(){
$(this).remove();
});
}removeItem();
}testArray();
答案 0 :(得分:1)
单击时不是从数组中删除项目,只是在单击时删除包含元素的li标记,为了从数组中删除元素,当单击项目的li时,必须使用splice方法从数组中删除元素如
var itemClicked = $('ul.fruit li');
itemClicked.on('click', function () {
$(this).remove();
var item = $(this).text();
var index = Fruit.indexOf(item);
Fruit.splice(index,1);
});