正在删除jQuery$（此）对象不工作的元素_Jquery_Html

正在删除jQuery$（此）对象不工作的元素

jquery html

正在删除jQuery$（此）对象不工作的元素,jquery,html,Jquery,Html,我试图删除html页面上的一个对象，该对象是用jQuery动态添加的，当然，它并没有删除元素。下面是jQuery代码的一个小片段，下面是我的HTML。当我查看控制台日志时，消息已成功打印，但对象仍在屏幕上。是否有我遗漏的内容应该发生什么：当用户单击元素“MATH”时，一个类为“content”的div应该出现在它下面。然后，当单击该div元素时，应该删除该对象 jQuery代码： $(document).ready(function (){ var subject = $(

我试图删除html页面上的一个对象，该对象是用jQuery动态添加的，当然，它并没有删除元素。下面是jQuery代码的一个小片段，下面是我的HTML。当我查看控制台日志时，消息已成功打印，但对象仍在屏幕上。是否有我遗漏的内容

应该发生什么：
当用户单击

元素“MATH”时，一个类为“content”的div应该出现在它下面。然后，当单击该div元素时，应该删除该对象

jQuery代码：

 $(document).ready(function (){
        var subject = $('.subject');
        var content = "<ul style='list-style-type: none;'> <li>some text</li> </ul>";
        subject.click(function(){
            $(this).append('<div class="content">' + content + '</div>');
        });
        $(document).on('click','div.content', function(){
            console.log("no such luck");//this prints
            $(this).remove();//this does not remove element however
        });
    });

$（文档）.ready（函数（）{
var subject=$（'.subject'）；
var content=“


HTML代码：
<!DOCTYPE html>
<html>
...

<body>
    <div class="jumbotron" style="background-color: lightblue; height: 25%;">
        <h1 class="subject" target="1">MATH</h1>
    </div>
 </body>
 </html>


...
数学

我以前在Codeacademy的一个示例中使用过上述代码，它工作得很好。
它确实删除了元素，但单击会传播到.subject
事件处理程序，该处理程序只插入与之类似的另一个元素
由于您需要能够委托给文档，因此可以确保.subject
事件处理程序在未直接单击时不会插入更多元素
subject.click(function(e) {
    if ( e.target === this )
        $(this).append('<div class="content">' + content + '</div>');
});

主题。点击（函数（e）{
如果（例如，目标===此）
$（this.append（“”+content+“”）；
});

与阿德内奥的回答相反，我在以下方面运气更好
诀窍是在“div.content”上使用remove（），而不是在“this”上使用remove（），正如在控制台日志输出中看到的那样，当您以这种方式定义处理程序时，“this”是一个空对象（或者我在这里遗漏了什么吗？我觉得可能有更深入理解的空间）。
这是一种不同的方法来停止事件传播：

$（函数（）{
var content=“

数学
这是假设页面中只存在一个div.content
，否则将删除所有且非特定的实例此不是空的，但使用$（'div.content'）
也会匹配插入.subject
的事件处理程序中的新元素，这就是为什么两者都被删除的原因，以及与该选择器匹配的任何其他元素。“当您以这种方式定义处理程序时，“this”是一个空对象”-不，它肯定是单击的元素，如果您不在其上使用JSON.stringify
，您可以看到。您是对的，这是我的问题。我最后做的是将“append”改为“after”，这就解决了我的问题，谢谢。将元素移到。subject之外当然也可以
$(document).on('click','div.content', function(){
        console.log("no such luck");//this prints
        console.log(JSON.stringify(this));
        $('div.content').remove();
});