'backgroundColor' not working with javascript

Question

I'm creating a tab menu like this:

function clear_selected() //sets all columns color black
{
  var parent = document.querySelector("#container")
  var items = document.querySelectorAll(".item")
  var n = items.length;
  for (var i = 0; i < n; i++)
    items[i].style.backgroundColor = "";
}

function plus(itself) //adds another column
{
  var parent = itself.parentElement;
  var n = parent.childElementCount;
  clear_selected();

  var n = parent.querySelectorAll(".item").length;
  var page = document.createElement("button");
  page.className = "item";
  page.style.backgroundColor = "blue";
  page.textContent = "column"
  page.onclick = function() {
    clear_selected();
    this.style.backgroundColor = "blue";
  };

  var temp = document.createElement("span");
  temp.className = "del"
  temp.innerHTML = "&times;"
  temp.onclick = function() { //it's suppose to remove a column and color default as blue
    document.querySelector("#main_item").style.backgroundColor = "blue" //THIS LINE ISN'T WORKING
    this.parentElement.remove();
  };

  page.appendChild(temp);
  parent.insertBefore(page, parent.childNodes[n]);
}

function see(el) {
  clear_selected();
  el.style.backgroundColor = "blue";
}

#container {
  display: flex;
  width: 100%;
  height: 50px;
  text-align: center;
  background-color: yellow;
}

.item {
  background-color: black;
  color: white;
  border: none;
  outline: none;
  cursor: pointer;
  margin: 0.1rem;
  padding: 0.1rem;
  max-width: 100%;

}

.del {
  background-color: red;
  display: inline-block;
  cursor: pointer;
  border-radius: 50%;
  width: 0.7rem;
  margin-left: 2rem;

}

<div id="container">
  <button class="item" id="main_item" style="background-color:blue;" onclick="see(this)">default column </button>
  <button class="item" onclick="plus(this)">+</button>
</div>

but when I press the 'x' to remove a column, I want the default column to color blue, but the line of code which is suppose to achieve that isn't working

document.querySelector("#main_item").style.backgroundColor = "blue"

Before pressing 'x':


After pressing 'x' on the last column:


What it SHOULD look like:

I've losing sleep over this, can someone PLEASE tell me why isn't it working?

Answer 1

When you click on the "X", both of your onclick handlers are getting called, including the one that runs clear_selected, which sets the background color to "".

You can fix this by using stopPropagation on the event passed into the onclick function for the "x". That will stop the click event from going up the chain to the parent element of the "x".

temp.onclick = function(e) {
    document.querySelector("#main_item").style.backgroundColor = "blue" 
    this.parentElement.remove();
    e.stopPropagation();
  };