javascript - hide button at end of array

Question

so here is the code i have so far, now i want to remove the button whenever the color is at the end of the array but i dont get it to work i tried different things with an if statement like this:

 if(color.length){
            document.getElementById("button").remove();
        }

and with "removechild" but none of these works does anyone have an solution?

var color = ["green", "red", "black"];
    
function page() {
    document.body.style.backgroundColor = "grey";
    //style page
    createButtons(10);
}
page();

function onbuttonclicked(a) {
    var Amount = document.getElementById("button" + a);
    var click = Amount.getAttribute('Color');
    var change = color.indexOf(click);
    Amount.setAttribute('style', 'background-color:' + color[change + 1]);
    Amount.setAttribute('Color', color[change + 1]);

    if(color.length){
        document.getElementById("button").remove();
    }
}

function set_onclick(amount) {
    for (var a = 1; a < (amount + 1); a++) {
        document.getElementById("button" + a).setAttribute("onclick", "onbuttonclicked(" + a + ")");
    }
}

function createButtons(amount) {
    for (var a = 1; a <(amount + 1); a++) {

        var button = document.createElement("button");
        button.id = "button" + a;
        button.innerHTML = "button " + a;
        button.setAttribute('Color', color[0]);
        button.setAttribute('style', 'background-color:' + color[0]);
        container.appendChild(button);
    }
    set_onclick(amount);
}

so for example i have a few green buttons when you click on the buttons the color changes a few times, the last color is black if the button is black and you click on it then i want to hide the buttons so you dont see it anymore

Answer 1

In order to check if the background color is the same as the last color, simply compare the elements (you named it Amount) background color with the last element in the array. And you also have to put the if statement BEFORE changing the color.

if (Amount.style.backgroundColor == color[color.length-1]) {
Amount.remove();

However you should re-think about your naming since it can get a little confusing. For example: Amount is definetly the wrong name since it refers to the clicked element. The parameter you pass (a) is the amount.

If you have any questions feel free to ask them.

let color = ["green", "red", "purple", "blue", "black"];

function page() {
  document.body.style.backgroundColor = "grey";
  //style page
  createButtons(30);
}
page();

function onbuttonclicked(a) {
  var Amount = document.getElementById("button" + a);
  var click = Amount.getAttribute('Color');
  var change = color.indexOf(click);
  if (Amount.style.backgroundColor == color[color.length - 1]) {
    Amount.remove();
  } else {
    Amount.setAttribute('style', 'background-color:' + color[change + 1]);
    Amount.setAttribute('Color', color[change + 1]);
  }

}

function set_onclick(amount) {
  for (var a = 1; a < (amount + 1); a++) {
    document.getElementById("button" + a).setAttribute("onclick", "onbuttonclicked(" + a + ")");
  }
}

function createButtons(amount) {
  for (var a = 1; a < (amount + 1); a++) {

    var button = document.createElement("button");
    button.id = "button" + a;
    button.innerHTML = "button " + a;
    button.setAttribute('Color', color[0]);
    button.setAttribute('style', 'background-color:' + color[0]);
    document.getElementById("container").appendChild(button);
  }
  set_onclick(amount);
}

<div id="container">
</div>