main[0].removeChild(main[0].childNodes[0]); // What should I write instead of CHILDNODES[0]
main[0].removeChild(this) // this refers to the clicked element
EDIT:
As the indices suggest, main[0].removeChild(main[0].childNodes[0]); removes the first element (with index 0).
If the element is clicked, it is this inside the onclick function, so you have direct reference to it. A more general approach would be:
div1.onclick = function () {
this.parentElement.removeChild(this)
...
}
or (if you don’t mind it does not work in Internet Explorer) you can directly remove the this element, which is even more elegant and readable:
div1.onclick = function () {
this.remove()
...
}
You could add the event listener then reference the event target like this:
for (var x = 0; x < document.getElementsByTagName('div').length; x++) {
document.getElementsByTagName('div')[x].addEventListener('click', event => {
console.log(event.target, ' was clicked')
});
};
div1.onclick = function (e) {
e.target.remove()
}
I want to remove exactly the div onclick, not in sequence. I’ve tried so many ways to fix it, but unfortunately it didn’t work.I don’t know what to do. So when I click on the div, it removes the div in sequence, but I need to remove exacty the div that Ii was clicking.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
display: flex;
flex-direction: column;
color: white;
}
div:hover {
cursor: pointer;
}
</style>
</head>
<body>
<div class="main"></div>
<div class="result"></div>
<script>
var letters = ['O', 'T', 'V', 'I', 'M', 'N', 'I', 'O', 'A', 'T']
var main = document.getElementsByClassName('main')
var result = document.getElementsByClassName('result')
console.log(main[0]);
main[0].style.display = 'flex'
result[0].style.display = 'flex'
function rand_color() {
var color = '#' + (0x1000000 + (Math.random()) * 0xffffff).toString(16).substr(1, 6)
return color;
}
for (i = 0; i < letters.length; i++) {
var div1 = document.createElement('div')
div1.style.margin = "30px"
div1.style.fontSize = "60px"
div1.style.height = "70px"
div1.style.backgroundColor = rand_color();
div1.style.width = "80px"
div1.style.textAlign = "center"
div1.innerText = letters[i]
main[0].appendChild(div1)
div1.onclick = function () {
main[0].removeChild(main[0].childNodes[0]); `What should I write instead of CHILDNODES[0]`
var div2 = document.createElement('div')
div2.innerHTML = this.innerText
div2.style.margin = "30px"
div2.style.fontSize = "60px"
div2.style.height = "70px"
div2.style.backgroundColor = rand_color()
div2.style.width = "80px"
div2.style.textAlign = "center"
result[0].appendChild(div2)
div2.ondblclick = function () {
result[0].removeChild(div2)
main[0].appendChild(div2)
}
}
}
</script>
</body>
</html>
Please elaborate on what the issue is.
Can you try my code please? When you clicking on the div it will be removed, but that doesn’t work.
While this might answer the question, a short explanation will approve the answer.
