How to remove a element of specific class created using Javascript when clicked outside the box-CodePudding

I wanted to remove an element created using the JavaScript of specific class when clicked outside the box .
I have used created a color-picker using .createElement . Add a class to it .
Now I wanted to remove that picker when outside of its parent element is clicked as sometimes users don't pick the color and on every click a color-picker is created .

How my function works :

Click on circle option will open up to change : borderColor or backgroundColor
When one option is chosen the color of that property is changed

var restyleBG = document.getElementsByClassName("restyleBackground");
restyleBG[0].addEventListener('click', changeBGcolor);

function changeBGcolor() {
  let optionChooseBackground = document.getElementById("optionToChooseBackground");
  optionChooseBackground.style.display = "block";
  let optionChooseTag = optionChooseBackground.getElementsByTagName("p")

  for (let j = 0; j < optionChooseTag.length; j  ) {
    optionChooseTag[j].onclick = function() {
      var varWantToChange = optionChooseTag[j].innerHTML;

      let optionToChoosePicker = document.getElementById("optionToChoose");
      let colourPicker = document.createElement("input");
      colourPicker.type = "color";
      colourPicker.className = "colour-picker";
      optionToChoosePicker.appendChild(colourPicker);
      colourPicker.click();
      colourPicker.addEventListener('input', function() {
        var colorPickerVal = colourPicker.value;
        if (varWantToChange == "borderColor") {
          restyleBG[0].style.borderColor = colorPickerVal;
        } else if (varWantToChange == "backgroundColor") {
          restyleBG[0].style.backgroundColor = colorPickerVal;
        }
      })

    }
  }
}

#optionToChoose {
  border: 2px solid red;
  width: 200px;
}

#optionToChooseBackground {
  position: absolute;
  height: 100vh;
  width: 100vw;
  background-color: rgba(165, 42, 42, 0.205);
  display: none;
}

#clockOuterCircle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42vw;
  height: 42vw;
  margin: auto;
  border-radius: 50%;
  border: 4px solid rgb(255, 62, 62);
  background-color: rgb(253, 133, 133);
  user-select: none;
}

<div id="optionToChooseBackground">
  <div id="optionToChoose">
    <h3>Choose a style want to change :</h3>
    <h4>Border</h4>
    <p>borderColor</p>
    <p>backgroundColor</p>
  </div>
</div>

<div id="clockOuterCircle" class="restyleBackground"></div>

Upto now works as needed but creating pickers on each click whether choosing a color or not (not used a on-change event on color picker which executes when color value is changed and remove the picker but this don't come in handy when user just click the property and don't change the color).

The method I tried is in below snippet that when outside of color-picker parent element is clicked it removes the created element but this is throwing error when clicked .

Show code snippet

var restyleBG = document.getElementsByClassName("restyleBackground");
restyleBG[0].addEventListener('click', changeBGcolor);

function changeBGcolor() {
  let optionChooseBackground = document.getElementById("optionToChooseBackground");
  optionChooseBackground.style.display = "block";
  let optionChooseTag = optionChooseBackground.getElementsByTagName("p")

  for (let j = 0; j < optionChooseTag.length; j  ) {
    optionChooseTag[j].onclick = function() {
      var varWantToChange = optionChooseTag[j].innerHTML;

      let optionToChoosePicker = document.getElementById("optionToChoose");
      let colourPicker = document.createElement("input");
      colourPicker.type = "color";
      colourPicker.className = "colour-picker";
      optionToChoosePicker.appendChild(colourPicker);
      colourPicker.click();
      colourPicker.addEventListener('input', function() {
        var colorPickerVal = colourPicker.value;
        if (varWantToChange == "borderColor") {
          restyleBG[0].style.borderColor = colorPickerVal;
        } else if (varWantToChange == "backgroundColor") {
          restyleBG[0].style.backgroundColor = colorPickerVal;
        }
      })

      optionChooseBackground.addEventListener('click', optionChooseBackgroundClose)

      function optionChooseBackgroundClose() {
        if (event.target == optionChooseBackground) {
          let optionToChoosePicker = document.getElementById("optionToChoose");
          optionToChoosePicker.removeChild(colourPicker);
        }
      }
    }
  }
}

#optionToChoose {
  border: 2px solid red;
  width: 200px;
}

#optionToChooseBackground {
  position: absolute;
  height: 100vh;
  width: 100vw;
  background-color: rgba(165, 42, 42, 0.205);
  display: none;
}

#clockOuterCircle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42vw;
  height: 42vw;
  margin: auto;
  border-radius: 50%;
  border: 4px solid rgb(255, 62, 62);
  background-color: rgb(253, 133, 133);
  user-select: none;
}

<div id="optionToChooseBackground">
  <div id="optionToChoose">
    <h3>Choose a style want to change :</h3>
    <h4>Border</h4>
    <p>borderColor</p>
    <p>backgroundColor</p>
  </div>
</div>

<div id="clockOuterCircle" class="restyleBackground"></div>

Thank you very much in advance

Any better method to remove picker than above mentioned is most welcomed

CodePudding user response：

Try this.

Edit: I removed new ids. HTML remains as yours.

var restyleBG = document.getElementsByClassName("restyleBackground");

restyleBG[0].addEventListener('click', changeBGcolor);

function changeBGcolor() {
  let optionChooseBackground = document.getElementById("optionToChooseBackground");
  optionChooseBackground.style.display = "block";

  
  let optionToChoosePicker = document.getElementById("optionToChoose");
  let colourPicker = document.createElement("input");
  colourPicker.type = "color";
  colourPicker.className = "colour-picker";
  optionToChoosePicker.appendChild(colourPicker);
  

 let optionChooseTag = optionChooseBackground.getElementsByTagName("p")

var varWantToChange = "";
  for (let j = 0; j < optionChooseTag.length; j  ) {
    optionChooseTag[j].addEventListener("click", () => {
    varWantToChange = optionChooseTag[j].innerHTML;
    });

}
  
      
     
      colourPicker.addEventListener('input', function() {
        var colorPickerVal = colourPicker.value;
        if (varWantToChange === "borderColor") {
          restyleBG[0].style.borderColor = colorPickerVal;
        } else if (varWantToChange === "backgroundColor") {
          restyleBG[0].style.backgroundColor = colorPickerVal;
        }
      })
}

#optionToChoose {
  border: 2px solid red;
  width: 200px;
}

#optionToChooseBackground {
  position: absolute;
  height: 100vh;
  width: 100vw;
  background-color: rgba(165, 42, 42, 0.205);
  display: none;
}

#clockOuterCircle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42vw;
  height: 42vw;
  margin: auto;
  border-radius: 50%;
  border: 4px solid rgb(255, 62, 62);
  background-color: rgb(253, 133, 133);
  user-select: none;
}

<div id="optionToChooseBackground">
  <div id="optionToChoose">
    <h3>Choose a style want to change :</h3>
    <h4>Border</h4>
    <p>borderColor</p>
    <p>backgroundColor</p>
  </div>
</div>

<div id="clockOuterCircle" class="restyleBackground"></div>

CodePudding user response：

When you open the datepicker You must create a transparent div that fill the screen but below the selector and add the closing event to it.