我無法在Object的onclick函數中刪除dom元素'img'

Question

我寫了一個簡單的泡泡游戲（我創建了數組，他有泡泡對象），當我單擊它時泡泡必須破裂（所以我刪除了dom img），但是我不能應用於onclick函數中的dom元素。 為什么？ 如何應用到dom元素（IMG）或如何在func onclick中刪除dom img？

我的對象“氣泡” 在此處輸入圖片描述

Google Chrome Inspector編寫... 在此處輸入圖片描述

完整代碼：

 function resize() { Grass.width = document.documentElement.clientWidth; Grass.style.left = 0 + 'px'; Grass.style.top = document.documentElement.clientHeight - 180 + 'px'; } function bubble(id) { this.IMG = document.createElement('img'); this.IMG.src = './bubble.png'; this.IMG.id = id; this.IMG.onclick = function () { document.getElementById(this.IMG.id).parentNode.removeChild(document.getElementById(this.IMG.id)); } this.createBubble = function () { this.bubbleSize = Math.random() * (144 - 30) + 30; this.bomDiapozon = Math.random() * (75 - 55) + 55; this.IMG.style.width = this.bubbleSize + 'px'; this.IMG.style.height = this.bubbleSize + 'px'; this.xStart = Math.random() * document.documentElement.clientWidth; this.yStart = -Math.random() * document.documentElement.clientHeight; this.x = this.xStart; this.y = this.yStart; this.xSpeed = Math.random() * (9 + 9) - 9; this.ySpeed = Math.random() * (5 - 1) + 1; this.flyWidth = Math.random() * (288 - 144) + 144; } this.createBubble(); document.body.appendChild(this.IMG); this.fly = function () { if (this.y + this.bubbleSize >= document.documentElement.clientHeight - this.bomDiapozon) { this.createBubble(); } if ((this.x >= this.xStart + this.flyWidth / 2) || (this.x <= this.xStart - this.flyWidth / 2)) { this.xSpeed = -this.xSpeed; } this.IMG.style.left = this.x + 'px'; this.IMG.style.top = this.y + 'px'; this.x += this.xSpeed; this.y += this.ySpeed; } } function go() { for (var i = 0; i < amountBubbles; i++) { bubbles[i].fly(); } } document.body.style.overflow = 'hidden'; var amountBubbles = 30; var bubbles = []; for (var i = 0; i < amountBubbles; i++) { bubbles[i] = new bubble(i + 1); } var Grass = document.createElement('img'); Grass.src = './Grass.png'; document.body.appendChild(Grass); resize(); setInterval(go, 40); 

 img { position:absolute; } 

Answer 1

您已經可以訪問事件和節點，而無需重新選擇它。 嘗試這個：

this.IMG.onclick = function(event) {
  var parent = event.target.parentElement;
  parent.removeChild(event.target)
}

Answer 2

歡迎來到Stalk Overflow！

在您的匿名函數中， this沒有上下文。

下面的代碼片段this綁定到該函數，並且不再是未定義的：

this.IMG.onclick = (function () {
    document.getElementById(this.IMG.id).parentNode.removeChild(document.getElementById(this.IMG.id));
}).bind(this)

只需注意如何用()包裝它，然后將.bind(this)添加到它即可。

綁定上下文的另一種方法是使用箭頭函數：

 this.IMG.onclick = () => {
        document.getElementById(this.IMG.id).parentNode.removeChild(document.getElementById(this.IMG.id));
    }

此箭頭函數將this ， arguments和super綁定到您的方法。

在此處閱讀更多有關箭頭功能的信息

看到它在下面與.bind(this) ：

 function resize() { Grass.width = document.documentElement.clientWidth; Grass.style.left = 0 + 'px'; Grass.style.top = document.documentElement.clientHeight - 180 + 'px'; } function bubble(id) { this.IMG = document.createElement('img'); this.IMG.src = './bubble.png'; this.IMG.id = id; this.IMG.onclick = (function () { document.getElementById(this.IMG.id).parentNode.removeChild(document.getElementById(this.IMG.id)); }).bind(this) this.createBubble = function () { this.bubbleSize = Math.random() * (144 - 30) + 30; this.bomDiapozon = Math.random() * (75 - 55) + 55; this.IMG.style.width = this.bubbleSize + 'px'; this.IMG.style.height = this.bubbleSize + 'px'; this.xStart = Math.random() * document.documentElement.clientWidth; this.yStart = -Math.random() * document.documentElement.clientHeight; this.x = this.xStart; this.y = this.yStart; this.xSpeed = Math.random() * (9 + 9) - 9; this.ySpeed = Math.random() * (5 - 1) + 1; this.flyWidth = Math.random() * (288 - 144) + 144; } this.createBubble(); document.body.appendChild(this.IMG); this.fly = function () { if (this.y + this.bubbleSize >= document.documentElement.clientHeight - this.bomDiapozon) { this.createBubble(); } if ((this.x >= this.xStart + this.flyWidth / 2) || (this.x <= this.xStart - this.flyWidth / 2)) { this.xSpeed = -this.xSpeed; } this.IMG.style.left = this.x + 'px'; this.IMG.style.top = this.y + 'px'; this.x += this.xSpeed; this.y += this.ySpeed; } } function go() { for (var i = 0; i < amountBubbles; i++) { bubbles[i].fly(); } } document.body.style.overflow = 'hidden'; var amountBubbles = 30; var bubbles = []; for (var i = 0; i < amountBubbles; i++) { bubbles[i] = new bubble(i + 1); } var Grass = document.createElement('img'); Grass.src = './Grass.png'; document.body.appendChild(Grass); resize(); setInterval(go, 40); 

 img { position:absolute; }