如何刪除我使用JQuery創建的DIV

當用戶單擊一個對象時，我想爲它生成菜單。如何刪除我使用JQuery創建的DIV

$(".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; 
});

但它似乎並沒有很好地工作。

來源

2013-07-13 Aditya

有什麼在你的console.log報道？ –

可能您使用相同的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

來源

2013-07-13 14:09:08

我不知道你的完整的HTML標記，所以我用body作爲選定的元素。你可能想要改變這個以供你自己使用。我使用.on()事件處理程序（http://api.jquery.com/on/）和mouseleave事件來刪除您的#tempMenu。

jQuery的

$('body').on('mouseleave', '#tempMenu', function() { 
    $(this).remove(); 
    return false; 
});

來源

2013-07-13 15:51:26 hungerstar

如何刪除我使用JQuery創建的DIV

回答

相關問題