I needed to eliminate an element that was created using JavaScript of a specific class when clicked outside the box.
I have created a color-picker using .createElement and added a class to it.
Now, my goal is to remove that picker whenever a click occurs outside its parent element because sometimes users do not select a color and on every click, a new color-picker is generated.
Here's how my function operates:
- Clicking on the circle option will allow you to change either the
borderColororbackgroundColor - When an option is selected, the color of that property is altered accordingly
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>So far, everything functions as intended, but there's a problem with creating pickers on each click, regardless of whether a color is chosen or not (I did not use an onchange event on the color picker which would execute only when the color value is changed, resulting in removal of the picker. However, this approach is not practical when the user simply clicks on the property without changing the color).
The method I attempted is depicted in the code snippet below where clicking outside the color-picker's parent element should remove the created element, but unfortunately it throws an error when clicked.
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
If anyone has a better method to remove the picker than the one mentioned above, please feel free to share!