如何准确删除 div onclick

Question

我想完全删除 div onclick，而不是按顺序。 我已经尝试了很多方法来修复它，但不幸的是它没有奏效。我不知道该怎么办。 因此，当我单击 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

编辑：

正如指数所示， main[0].removeChild(main[0].childNodes[0]); 删除第一个元素（索引为 0）。

如果该元素被点击，它就是onclick function 里面的this ，所以你可以直接引用它。 更一般的方法是：

div1.onclick = function () {
   this.parentElement.removeChild(this)
   ...
}

或者（如果您不介意它在 Internet Explorer 中不起作用）您可以直接删除this元素，这更加优雅和可读：

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

Answer 2

您可以添加事件侦听器，然后像这样引用事件目标：

   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