How do I redraw and then remove the old version of an irregular shape?

Question

I want to make an object move and then remove its old self after its been drawn. This is my full code below, right now the fish moves but doesn't remove itself after it moved. I have tried adding screenClear() but that doesnt work since I have more objects and the screen cant clear every time. I need something that removes the fish.

class Fisk {
 constructor(lenght, width, color, eyecolor, x, y, speed) {
    this.lenght = lenght;
    this.width = width;
    this.color = color;
    this.eyecolor = eyecolor;
    this.x = x;
    this.y = y;
    this.x_speed = speed;
    this.y_speed = speed;
    fish_group.push(this);

   
    this.draw();
   
 }
  
    mage() {
        circle(this.x+40, this.y, 60, this.color)      
    }
  
    bakfena() {
        triangle(this.x+20, this.y, this.x-70, this.y-60, this.x-70, this.y+50, this.color)      
    }
  
    topfena() {
        triangle(this.x+10, this.y-50, this.x+70, this.y-50, this.x+40, this.y-90, this.color)      
    }
  
    underfena() { // Ska animeras 
        triangle(this.x+60, this.y+50, this.x+10, this.y+50, this.x+20, this.y+90, this.color)      
    }
  
  öga() {
        // Ögat (outer)
        circle(this.x+80, this.y-20, this.width-50, fishEyeColor); // Anger specifikationerna 
        
        // Ögat (inner)
        circle(this.x+80, this.y-20, this.width-55, "Black"); // Anger specifikationerna 

  }
  
  
  mun() {
        // Cirkel 1 (undre) (själva munnen)
        circle(this.x+90, this.y+10, this.width-50, "Black"); // Anger specifikationerna
        
        // Cirkel 2 (övre) (den som täcker munnen)
        circle(this.x+90, this.y+5, this.width-50, this.color); // Anger specifikationerna

    
  }
  
  draw() { // Målar upp hela kroppen
    this.mage();
    this.bakfena();
    this.topfena();
    this.underfena();
    this.öga(); 
    this.mun(); 
    
  }
  
  uppdatera() { // Uppdaterar skärmen efter varje förändring hos fisken
    this.draw();

 
    
  }
  
 
  
  flytta_vänster() {
    this.x += this.x_speed * -1;
    this.y_speed = 0;
  }
  
  flytta_höger() {
    this.x += this.x_speed * 1;
    this.y_speed = 0;
  }
  
  flytta_upp() {
    this.x += this.x_speed * 1;
    this.y_speed = 0;

  }
  
  flytta_ner() {
    this.x += this.x_speed * -1;
    this.y_speed = 0;
  }
  

  
}
  
// Funktioner
function skapa_fiskar() {

   
  for (amountOfFish; amountOfFish < max_amountOfFish; amountOfFish++) { // Denna funktion skapar exakt så många fiskar som ska skapas
    var y = Math.floor(Math.random() * 100); // Randomizar y position | max
    const color = fish_colors[Math.floor(Math.random() * fish_colors.length)]; // Randomizar färg
    
    new Fisk(0, 60, color, fishEyeColor, 10, y, 1); // Lenght, Width, Color, eyeColor, X, Y, speed

  }
  
  //fisk1 = new Fisk(0, 60, fish_colors[0], fishEyeColor, 100, 100, 10); 
  
  
  
}

  
function simulation_loop() {
    for (var num in fish_group) {
        fish_group[num].flytta_höger();
        fish_group[num].uppdatera();
    
  }
    
    
}

  
// -------
// Variabler
var fish_colors = ['#FFA500', '#6633ff', '#ceaf9b', '#8ebd9d', '#e6e953'];    
var fishEyeColor = "#f0ffff";
  
var amountOfFish = 0;
var max_amountOfFish = 1;
var fish_group = new Array();


// -------
skapa_fiskar();
setInterval(simulation_loop, 100); // 33 milliseconds = ~ 30 frames per sec

Answer 1

Found the issue and solved it.

function simulation_loop() { 

// Fiskarna 
skapa_fiskar();
clearScreen();
bakgrund();
for (var num in fish_group) { // Movement av fisken
    fish_group[num].flytta_höger();
    fish_group[num].uppdatera();
  
    if (fish_group[num].x >= totalWidth+80) { 
        delete fish_group[num];
        amountOfFish-=1;
    }

}

The issue was the order of the code. I had to clear my screen then draw all the fishes.