jquery - 如何删除使用 JQuery 创建的 DIV

Question

当用户点击一个对象时，我想为它生成菜单。

$(".thumbImage").click(function(e){

    var xCoord = e.pageX;
    var yCoord = e.pageY;

    var content = "<div class='thumbMenu' id='tempMenu'>THE MENU IS HERE</div>";
    $(this).after(content);

    $("#tempMenu").css("visibility","visible");
    $("#tempMenu").css("left",xCoord-30);
    $("#tempMenu").css("top",yCoord-30);
    return false;

});

现在我希望当用户拿走鼠标时，id = "tempMenu"的 div 应该被删除。如果用户点击其他 thumbImage，应该不会有问题。

这是我现在的代码:

$(".thumbImage").mouseout(function(e){
    $("#tempMenu").remove();
    return false;
});

但是好像效果不是很好。

Answer 1

您可能创建了具有相同 ID 的多个元素。 如果您有多个具有 thumbImage 类的元素，通过单击它们您可以在它们之后创建 ID 为 tempMenu 的元素。

也许你应该从创建的元素中删除 id 并像这样调用删除:

$(".thumbImage").mouseout(function(e){
    $(this).next(".thumbMenu").remove();
    return false;
});

您也可以像这样创建您的 div:

var myDiv = $("<div/>", {
  "class" : "thumbMenu",
  text : "THE MENU IS HERE",
  "visibility": "visible",
  "left": xCoord-30,
  "top" : yCoord-30
})

$(this).after(myDiv);

Link to the documentation