Javascript 单击div后使其消失

我让圆圈跳水随机下降。当我点击一个圆圈时，我希望它消失，我希望分数增加1

这是我的密码：

函数CreateDiv（）{
var ranLeft1=Math.floor（（Math.random（）*700）+1）；
var ranInterval=1000+数学楼层（（数学随机（）*5000）+1）；
jQuery（“”）.css（{top:20，left:ranLeft1}）.animate（{top:+=573px}，9000）.appendTo（'#container'）；
setTimeout（CreateDiv，ranInterval）；
}
var得分=0；
document.getElementById（“myBtn”）.addEventListener（“单击”，myFunction）；
函数myFunction（）{
分数++；
//点击一下就可以使div消失。怎么做？？！！
document.getElementById（“score”）.innerHTML=score；
}

您可以尝试此方法（注意：此方法来自内存，未经测试）

函数CreateDiv（）{
var ranLeft1=Math.floor（（Math.random（）*700）+1）；
var ranInterval=1000+数学楼层（（数学随机（）*5000）+1）；
jQuery（“”）.css（{top:20，left:ranLeft1}）.animate（{top:+=573px}，9000）.appendTo（'#container'）；
setTimeout（CreateDiv，ranInterval）；
}
var得分=0；
$（document）.on（“click”，“.droper1”，function（））{
分数++；
$（“#分数”）.innerHtml（分数）；
$（this.remove（）；
});

单击时，您希望

删除（）

$（此）

，但使用委托比将click方法直接分配给每个新生成的div更快：

var div_counter=0;
function CreateDiv() {
    var ranLeft1 = Math.floor((Math.random() * 700) + 1);
    var ranInterval = 1000 + Math.floor((Math.random() * 5000) + 1);
    jQuery('<div class="droper1" id="'+ ++div_counter +'" />').css({top: 20, left: ranLeft1 }).animate({top: "+=573px"}, 9000 ).appendTo('#container' );
    window.setTimeout( CreateDiv, ranInterval );
}

var score = 0;

$('body').on('click', '.droper1', function(){
   score++;
   $(this).remove();
});

var div_计数器=0；
函数CreateDiv（）{
var ranLeft1=Math.floor（（Math.random（）*700）+1）；
var ranInterval=1000+数学楼层（（数学随机（）*5000）+1）；
jQuery（“”）.css（{top:20，left:ranLeft1}）.animate（{top:+=573px}，9000）.appendTo（'#container'）；
setTimeout（CreateDiv，ranInterval）；
}
var得分=0；
$（'body'）。在（'click'，'droper1'，函数（）上{
分数++；
$（this.remove（）；
});

这应该可以满足您的要求

当我点击一个圆圈时，我希望它消失，我想要分数 增加一

下面的加载代码创建了一个单击功能。单击其中一个圆时，div将被删除（但如果需要，也可以使用hide）。分数增加1。出于测试原因，我将其留在了console.log（）中，以便您可以选择在inspector中看到分数增加

jQuery（文档）.ready（函数（）{
var得分=0；
$（'.foo'）。在（'click'，function（）上{
jQuery（this.remove（）；
分数++；
console.log（“新分数为：”+分数）；
});
});
.foo{
边界半径：50%；
宽度：20px；
高度：20px；
背景颜色：蓝色；
文本缩进：-10000px；
}
.foo:悬停{
光标：十字线；
}

内容
内容
内容
内容
在我看来，您希望它们从DOM中删除，而不仅仅是消失，对吗？否则，您的DOM将非常满，非常快！看起来您将创建几个具有相同id的div
droper1
。那是无效的！为什么要投否决票？这是一个有效的问题，他发布了他尝试过的代码。正如scottie所说，您应该删除元素，以防止DOM变满并导致浏览器延迟/崩溃。您还应该确保对落在视图之外且未单击的圆执行此操作。也许您可以创建一个间隔，在该间隔中检查每个圆的
top
属性，如果超过某个值，则将其删除。这对动态添加的DOM元素不起作用。您需要使用.on而不是.click。此外，还需要$（'.droper1'），而不是$（'droper1'）。此示例不起作用。
div\u计数器
帮助您拥有uniqie
id
s；虽然如果您不在其他地方使用该属性，您可以完全删除它。看起来@Scottie已经给了您基本相同的答案。您应该更改此
jQuery（this）.hide（）
到这个
jQuery（this.remove（）谢谢@Joe Sager，在其他关于是否需要隐藏或删除的评论之前，我很快就完成了我的代码片段。我已经编辑了这个片段。希望它能帮助某些人。这似乎回答了OP的问题，但不确定为什么会被否决？请参阅Scottie的评论：“这对动态添加的DOM元素不起作用。您需要使用.on而不是.click”@JoeSager Edited to use.on（）
function CreateDiv() {
    var ranLeft1 = Math.floor((Math.random() * 700) + 1);
    var ranInterval = 1000 + Math.floor((Math.random() * 5000) + 1);
    jQuery('<div class="droper1" onclick="myFunction()" />').css({top: 20, left: ranLeft1 }).animate({top: "+=573px"}, 9000 ).appendTo('#container' );
    window.setTimeout( CreateDiv, ranInterval );
}

var score = 0;

$(document).on("click", ".droper1", function() {
    score++;
    $("#score").innerHtml(score);
    $(this).remove();
});

var div_counter=0;
function CreateDiv() {
    var ranLeft1 = Math.floor((Math.random() * 700) + 1);
    var ranInterval = 1000 + Math.floor((Math.random() * 5000) + 1);
    jQuery('<div class="droper1" id="'+ ++div_counter +'" />').css({top: 20, left: ranLeft1 }).animate({top: "+=573px"}, 9000 ).appendTo('#container' );
    window.setTimeout( CreateDiv, ranInterval );
}

var score = 0;

$('body').on('click', '.droper1', function(){
   score++;
   $(this).remove();
});