Develop Reference

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

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 .
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

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>

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.

CSS issue with changing colors on hover / clicked

var $ = function (id) { return document.getElementById(id); };
function generatealtartiles() {
for (let i = 1; i < 7; i++) {
var div = document.createElement('div');
div.id = "at" + i;
div.addEventListener("click", function () { buildaltar(i) });
$("altartiles").appendChild(div);
}
}
function buildaltar(tilenumber) {
var tileId = "a" + tilenumber;
$("altartiles").className = "red";
$(tileId).style.borderColor = "#fff";
}
#altartiles {
position: absolute;
top: 10px;
left: 10px;
display: grid;
grid-template-columns: 34px 34px 34px;
grid-template-rows: 63px 63px;
grid-gap: 8px 6px;
}
#altartiles > div {
background-color: #000;
border: 2px dashed red;
}
#altartiles > div:hover {
border-color: #fff;
}
.red > div {
border: 2px dashed red;
border-color: red;
}
.red > div:hover {
border-color: #fff;
}
<body onload="generatealtartiles()">
<div id="altartiles"></div>
</body>
EDIT - I added a snippet but it gives an error when I click on one of the divs that I don't get when running this locally on my machine. When I run it locally the div border does turn white. It just stays white and won't turn back red unless I specifically turn it back to red by its ID. If I do that though it won't turn white on hover anymore.

Have you tried using the :active decorator instead of adding/removing classes?
.parentDiv > div {
border: 2px solid red;
}
.parentDiv > div:hover, div:active {
border-color: white;
}
Update after seeing snippet:
var $ = function (id) { return document.getElementById(id); };
function generatealtartiles() {
for (let i = 1; i < 7; i++) {
var div = document.createElement('div');
div.id = "a" + i;
div.onclick = function() {
resetTiles();
this.style.borderColor = 'white';
}
$("altartiles").appendChild(div);
}
}
function resetTiles(){
for (let i = 1; i < 7; i++) {
$("a" + i).style.borderColor = '';
}
}
#altartiles {
position: absolute;
top: 10px;
left: 10px;
display: grid;
grid-template-columns: 34px 34px 34px;
grid-template-rows: 63px 63px;
grid-gap: 8px 6px;
}
#altartiles > div {
background-color: #000;
border: 2px dashed red;
}
#altartiles > div:hover {
border-color: white;
}
<body onload="generatealtartiles()">
<div id="altartiles"></div>
</body>

How can I remove all borders from a group of elements except for the one created?

I'm trying to dynamically make all borders disappear except the newest created container's border I have tried the commented out section of the JavaScript. Can someone please provide an explanation/example of how this can be done?
function countButtonLinks() {
var elementGroups = document.getElementById('containsAll');
if(elementGroups.children.length == 0) {
var numID = 1;
}
if(elementGroups.children.length == 1) {
var numID = 2;
}
if(elementGroups.children.length == 2) {
var numID = 3;
}
if(elementGroups.children.length == 3) {
var numID = 4;
}
if(elementGroups.children.length == 4) {
var numID = 5;
}
if(elementGroups.children.length == 5) {
var numID = 6;
}
return numID;
}
function createContainer() {
if(document.getElementById('containsAll').children.length < 6) {
var elementA = document.createElement("span");
var elementAInnerTxt = document.createElement("div");
elementA.id = 'elem' + countButtonLinks();
elementAInnerTxt.id = 'elemInner' + countButtonLinks();
elementA.className = 'elem1';
elementAInnerTxt.className = 'elemInner1';
elementA.appendChild(elementAInnerTxt);
document.getElementById('containsAll').appendChild(elementA);
}
}
.containsAll {
width: 91%;
height: 75%;
position: absolute;
float: left;
margin-top: 1%;
margin-left: 1%;
background-color: transparent;
z-index: 91;
border: 1px #000000 solid;
border-radius: 7px;
padding: 5px;
}
.elem1 {
max-width: 100%;
max-height: 100%;
min-width: 100px;
min-height: 60px;
float: left;
background-color: transparent;
border: 1px #333333 solid;
border-radius: 5px;
}
.elemInner1 {
max-width: 100%;
max-height: 100%;
min-width: 100px;
min-height: 60px;
float: left;
background-color: transparent;
padding: 5px;
}
.buttonClass {
width: 100px;
height: 50px;
}
<button class="buttonClass" type="button" onclick="createContainer();">Click Me</button>
<div id="containsAll" class="containsAll"></div>
Please, no JQuery.

function countButtonLinks(){
var elementGroups = document.getElementById('containsAll');
// you don't need to use 'var numID'
return elementGroups.children.length + 1;
}
function createContainer(){
if(document.getElementById('containsAll').children.length < 6){
// add code here
for(var i=0;i<document.getElementById('containsAll').children.length;i++){
document.getElementById('containsAll').children[i].style.border = '0 none';
}
var elementA = document.createElement("span");
//...

Simply call the existing children of the element and remove the border before inserting
another element:
function countButtonLinks(){
var elementGroups = document.getElementById('containsAll');
var groupLength = elementGroups.children.length;
return groupLength++;
}
function createContainer() {
var containsAll = document.getElementById('containsAll'),
childrenLength = containsAll.children.length;
if (childrenLength >= 6) {
return; // Bail immediately since we only need to add a new element if the children's length is less than 6
}
// Call previous children
for ( var i = 0; i < childrenLength; i++ ) {
let child = containsAll.children[i];
// You can add a new class here that will remove the border
// but in this example, we'll use the style attribute to remove the border
child.style.border = 0;
}
// Now, add the new element
var elementA = document.createElement("span");
var elementAInnerTxt = document.createElement("div");
elementA.id = 'elem' + countButtonLinks();
elementAInnerTxt.id = 'elemInner' + countButtonLinks();
elementA.className = 'elem1';
elementAInnerTxt.className = 'elemInner1';
elementA.appendChild(elementAInnerTxt);
containsAll.appendChild(elementA);
}
Also, if you're going to use an element multiple times inside a function, make it a habit to store that element in a variable so you don't repeatedly calls the document.getElementById function.

You can accomplish this using the CSS :last-child selector
var container = document.getElementById('container');
function count_button_links()
{
return container.children.length + 1;
}
function new_container()
{
if (count_button_links() > 6) return false;
let span = document.createElement('span');
span.id = 'el_' + count_button_links();
span.className = 'box';
container.appendChild(span);
}
#container {
width: 100%;
background-color: transparent;
border: 1px solid #000;
border-radius: 7px;
padding: 5px;
display:flex;
height:200px;
}
.box {
flex:0 0 100px;
height:60px;
background-color: transparent;
border-radius: 5px;
}
.box:last-child{
border:1px solid #333;
}
button {
width: 100px;
height: 50px;
}
<button type="button" onclick="new_container();">Click Me</button>
<div id="container"></div>

How to modify divs generated by jQuery?

Complete noob question here:
I have this 16x16 grid of divs generated by jQuery
var rows = 16;
var columns = 16;
var $row = $("<div />", {
class: 'row'
});
var $square = $("<div />", {
class: 'square'
});
$(document).ready(function() {
for (var i = 0; i < columns; i++) {
$row.append($square.clone());
}
for (var x = 0; x < rows; x++) {
$(".box_main").append($row.clone());
}
});
.row {
width: auto;
height: 40px;
background: #313131;
}
.square {
width: 40px;
height: 40px;
border-radius: 10px;
margin: 0;
display: inline-block;
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Can I somehow use the addClass and removeClass (or anything else) in order to change the background-color of each div one by one upon hovering/mouseenter over them?
I tried work something out but I'm not even sure whether it's possible or not to do this.

addClass()/removeClass() (or even JS) is not needed for this - you can achieve it using the :hover pseduo selector of CSS alone. Try this:
.square:hover {
background: #C00; /* amend colour as needed */
}
Working example:
var rows = 16;
var columns = 16;
var $row = $("<div />", {
class: 'row'
}).appendTo('body');
var $square = $("<div />", {
class: 'square'
});
$(document).ready(function() {
for (var i = 0; i < columns; i++) {
$row.append($square.clone());
}
for (var x = 0; x < rows; x++) {
$(".box_main").append($row.clone());
}
});
body {
background: #313131;
}
.row {
width: auto;
height: 40px;
background: #313131;
}
.square {
width: 40px;
height: 40px;
border-radius: 10px;
margin: 0;
display: inline-block;
background: #fff;
}
.square:hover {
background: #C00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

beside the :hover pseduo selector, you might need to add an actual class to it with JS (perhaps it would make more sense if triggered by other event), nevertheless, here is an example using JS (addClass/removeClass)
var rows = 16;
var columns = 16;
var $row = $("<div />", {
class: 'row'
});
var $square = $("<div />", {
class: 'square'
});
$row.appendTo('body');
$(document).ready(function() {
for (var i = 0; i < columns; i++) {
$row.append($square.clone());
}
for (var x = 0; x < rows; x++) {
$(".box_main").append($row.clone());
}
$('.square').hover(function() { $(this).addClass('hovering'); }, function() { $(this).removeClass('hovering'); });
});
.row {
width: auto;
height: 40px;
background-color: #313131;
}
.square {
width: 40px;
height: 40px;
border-radius: 10px;
margin: 0;
display: inline-block;
background-color: #fff;
}
.hovering {
background-color: cyan;
border: 3px dashed blue;
width: 34px;
height: 34px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

JS slider tooltip

I have a slider with a pop-up that shows the current value of the slider.
but I want it only appears if I click on the slider and disappears when I do not click
is there a way to do it?
Below is my css js and html code
html:
<input type="range" id="myrange" name="myrange" class="zoom-range" min="0.25" max="2.00" step="0.01"/>
<output id="rangeHover" for="myrange" onmouseover="value = myrange.valueAsNumber;"></output>
js:
function modifyOffset() {
var el, newPoint, newPlace, offset, siblings, k;
width = this.offsetWidth;
newPoint = (this.value - this.getAttribute("min")) / (this.getAttribute("max") - this.getAttribute("min"));
offset = -1;
if (newPoint < 0) { newPlace = 0; }
else if (newPoint > 1) { newPlace = width; }
else { newPlace = width * newPoint + offset; offset -= newPoint;}
siblings = this.parentNode.childNodes;
for (var i = 0; i < siblings.length; i++) {
sibling = siblings[i];
if (sibling.id == this.id) { k = true; }
if ((k == true) && (sibling.nodeName == "OUTPUT")) {
outputTag = sibling;
}
}
outputTag.style.left = newPlace + "px";
outputTag.style.marginLeft = offset + "%";
outputTag.innerHTML = this.value;
}
function modifyInputs() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].getAttribute("type") == "range") {
inputs[i].onchange = modifyOffset;
// the following taken from http://stackoverflow.com/questions/2856513/trigger-onchange-event-manually
if ("fireEvent" in inputs[i]) {
inputs[i].fireEvent("onchange");
} else {
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
inputs[i].dispatchEvent(evt);
}
}
}
}
window.onload = modifyInputs;
css:
output {
position: absolute;
background-image: linear-gradient(#FAFAD2, #FAFAD2);
width: 30px;
height: 15px;
text-align: center;
color: black;
border-radius: 5px;
display: block;
bottom: 120%;
margin-top:5000px;
font-size:11px;
left: 100%;
}
output:after {
content: "";
position: absolute;
width: 0px;
height: 0px;
border-top: 10px solid #FAFAD2;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
top: 100%;
left: 100%;
margin-left: -26px;
margin-top: -1px;
}
#rangeHover{
display: block;
position: relative;
margin: -50px;
padding-right:10px;
padding-left:10px;
}
Thanks for help!

you could add to css:
output
{
display:none
}
input:hover + output
{
display:block;
}
UPDATE
tooltip visible on click:
input:active+ output
{
display:block;
}