I am looking to enhance my list by enabling the functionality to remove items permanently from the array when they are clicked. Although I have successfully implemented the removal feature using remove(), the issue arises when a new item is added to the array as it reappears along with the newly added item.
To view the code in action, please visit my JSFIDDLE account: 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();