Question

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

支持发生什么：
当用户点击<h1>元素“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
        });
    });

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示例中使用过上面的代码，它工作正常。

Answer 1

它确实删除了元素，但是click会传播到.subject事件处理程序，它只是插入另一个元素。

由于您需要传播才能委派给文档，因此您可以确保.subject事件处理程序在未直接单击时不插入更多元素

subject.click(function(e) {
    if ( e.target === this )
        $(this).append('<div class="content">' + content + '</div>');
});

FIDDLE

Answer 2

与adeneo的回答相反，我更幸运以下fiddle

$(document).on('click','div.content', function(){
        console.log("no such luck");//this prints
        console.log(JSON.stringify(this));
        $('div.content').remove();
});

诀窍是在'div.content'上使用remove（），而不是在'this'上 - 如控制台日志输出中所示，'this'是一个空对象，当你以这种方式定义处理程序时（或者我错过了某些东西）在这里？我觉得可能有更深入理解的空间。

Answer 3

这是一种不同的方法，可以阻止事件传播：

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

<script src="http://code.jquery.com/jquery-1.11.3.js"></script>

<div class="jumbotron" style="background-color: lightblue; height: 25%;">
  <h1 class="subject" target="1">MATH</h1>
</div>

使用jQuery $（this）对象删除元素不起作用

3 个答案: