如何准确删除 div onclick

Question

I want to remove exactly the div onclick, not in sequence.我想完全删除 div onclick，而不是按顺序。 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.因此，当我单击 div 时，它会依次删除 div，但我需要准确删除 Ii 单击的 div。

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

Answer 1

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]);正如指数所示， main[0].removeChild(main[0].childNodes[0]); removes the first element (with index 0).删除第一个元素（索引为 0）。

If the element is clicked, it is this inside the onclick function, so you have direct reference to it.如果该元素被点击，它就是onclick function 里面的this ，所以你可以直接引用它。 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:或者（如果您不介意它在 Internet Explorer 中不起作用）您可以直接删除this元素，这更加优雅和可读：

div1.onclick = function () {
   this.remove()
   ...
}

Answer 2

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') 
     }); 
   };

Answer 3

div1.onclick = function (e) {
     e.target.remove()
}

如何准确删除 div onclick

问题描述

3 个解决方案

解决方案1
1 已采纳 2020-07-19 21:44:08

解决方案2
0 2020-07-19 22:11:46

解决方案3
0 2020-07-19 22:41:33

如何准确删除 div onclick

问题描述

3 个解决方案

解决方案1 1 已采纳 2020-07-19 21:44:08

解决方案2 0 2020-07-19 22:11:46

解决方案3 0 2020-07-19 22:41:33

解决方案1
1 已采纳 2020-07-19 21:44:08

解决方案2
0 2020-07-19 22:11:46

解决方案3
0 2020-07-19 22:41:33