javascript removing from array

Question

hello okay my code runs but when i make a collision with the star it erases everything on my screen but what i need it to do is just remove the star from the screen but keep everything else in place because i plan to make a scoreboard for each star collected later on.

stars=[];
 stars.push({
   x: 420,
   y:  580,
width: 5,
height: 5

 });


function update() {

var score = 0; // score starts at 0

// check keys
if (keys[38] || keys[32]) {
    // up arrow or space
    if (!player.jumping && player.grounded) {
        player.jumping = true;
        player.grounded = false;
        player.velY = -player.speed * 2;
    }
}
if (keys[39]) {
    // right arrow
    if (player.velX < player.speed) {
        player.velX++;
    }
}
if (keys[37]) {
    // left arrow
    if (player.velX > -player.speed) {
        player.velX--;
    }
}

player.velX *= friction;
player.velY += gravity;

ctx.clearRect(0, 0, width, height);
ctx.fillStyle = "black";
ctx.beginPath();

player.grounded = false;
for (var i = 0; i < boxes.length; i++) {
    ctx.rect(boxes[i].x, boxes[i].y, boxes[i].width, boxes[i].height);

    var dir = colCheck(player, boxes[i]);



    if (dir === "left" || dir === "right") {
        player.velX = 0;
        player.jumping = false;
    } else if (dir === "bottom") {
        player.grounded = true;
        player.jumping = false;
    } else if (dir === "top") {
        player.velY *= -1;
    }

  }
for (var i = 0; i < stars.length; i++) {
    ctx.rect(stars[i].x, stars[i].y, stars[i].width, stars[i].height);

    var dir = colCheck(player, stars[i]);

    if(dir != null)
    {
delete stars[0];
//stars.splice(a);
//var resultObject = search.splice(0,1);
 }


     if (dir === "left" || dir === "right") {
        player.velX = 0;
        player.jumping = false;
    } else if (dir === "bottom") {
        player.grounded = true;
        player.jumping = false;
    } else if (dir === "top") {
        player.velY *= -1;
    }

}


  if(player.grounded){
     player.velY = 0;
}

player.x += player.velX;
player.y += player.velY;

ctx.fill();
ctx.fillStyle = "blue";
ctx.fillRect(player.x, player.y, player.width, player.height);

  requestAnimationFrame(update);
   }

Answer 1

replace

delete stars[0];

with

stars.splice(i,1);
i--;

I don't see anything else that is wrong.

Answer 2

You'll want to traverse through the array backwards. This is because the length of the array will change when you remove elements (and indices of elements at the end will be reduced by one), so your current code would skip some of the elements. In addition, as deme72 said, you'll want to use .splice(index, count) to remove items from the array. See the updated code below:

for (var i = stars.length - 1; i >= 0; i--) {
    // Other code
    stars.splice(i, 1);
}