如何删除搜索到的项目并从数组中删除该项目？

Question

I have a search field and in that field I can search an item. Then I have to remove it, but unfortunately I don t know how I can remove that item. Please, could you help me with that. I tried the following: If t know how I can remove that item. Please, could you help me with that. I tried the following: If t know how I can remove that item. Please, could you help me with that. I tried the following: If id of currentRobot is equal to current id` then delete that item, but I guess it is not quite right, cause it is not working My code

$(document).ready(function(){
    var currentRobot=null;

    for( var i=0; i<robots.length; i++){

        var robot = document.createElement('div');

        robotsContainer.appendChild(robot);

        robot.className='whole-block';  
        robot.setAttribute('id', robots[i].id);


        robot.innerHTML += "<img src='" + robots[i].avatar + "'>";
        robot.innerHTML += "<h3>" +robots[i].first_name + "</h3>";
        robot.innerHTML += "<h3>" +robots[i].last_name + "</h3>";
        robot.innerHTML += "<p>" +robots[i].email + "</p>";
        robot.innerHTML += "<p>" +robots[i].gender + "</p>";
        robot.innerHTML += "<p>" +robots[i].friends + "</p>";

    }   
        console.log(value)
    value.onkeyup = function(e){
        currentRobot=e.target.value;
        var robots = document.querySelectorAll("div[id]:not([id='"+ this.value +"']):not([id='robotsContainer'])");
        for(var i = 0; i < robots.length; i++ ){
            if(this.value==""){ 
                robots[i].style.display="block";
            } else {
                robots[i].style.display="none";
            }
        };

    };


 var button= document.getElementById('button');  
        button.addEventListener('click', function(e){
             e.preventDefault(); 

        for(var i = 0; i < robots.length; i++){
                if (robots[i].id ===  currentRobot) robots.splice(i, 1);

        }
        }, false);

});

Answer 1

You are assiging currentRobot

currentRobot=e.target.value;

and then you are comparing its value

  if (robots[i].id ===  currentRobot) robots.splice(i, 1);

My hunch is that currentRobot and robots[i.id is not of the same type. Before the comparison try adding

console.log( currentRobot, robots[i].id);

They need to be of the same data type for this comparison to work.

Also, please keep in mind that the first index of an array is 0 not 1 .

Answer 2

Without knowing what the global robots is, we must guess.

1. robots is a true array

If robots is a true JavaScript array, then the removal from the array should work with splice , but:

• you should better exit the loop as soon as you do that
• this removal will have no effect on your page

So, your code could deal with that as follows:

So replace this:

if (robots[i].id === currentRobot) robots.splice(i, 1);

..with:

if (robots[i].id === currentRobot) {
    var node = document.getElementById(currentRobot);
    node.parentNode.removeChild(node);
    robots.splice(i, 1);
    break; // and exit loop!
}

2. robots is an HTML Collection

If your global variable robots is an HTML collection, then it is array-like, but not a true array, so you cannot apply splice on them. Instead you must use DOM methods.

So then replace this:

if (robots[i].id === currentRobot) robots.splice(i, 1);

..with:

if (robots[i].id === currentRobot) {
    robots[i].parentNode.removeChild(roots[i]);
    break; // and exit loop!
}

You need to exit the loop, as it will be awkward to continue the loop on a mutating HTML Collection, and it also is not necessary, since you expect only one match any way.