Facebook comment delete button?

[HelloJarvis]

My desired effect is for a comment delete button like what Facebook has on mouseover. The parent element is inserting a new div that will be the "delete" button on mouseover, and removing it on mouseout. My problem is, when I try to mouse over the div being inserted, it just flashes and mouseover is not called. Here is my code:

                $(".parent").mouseover(function() {

                    $(this).append("<div class=\"delete\" style=\"display:inline;width:20px;height:20px;background-color:blue;\">X</div>");

                });

                $(".parent").mouseout(function() {

                    $(this).children(":last").remove();

                });

                $(".delete").click(function() {

                    alert("hello");

                });

[Echo89]

Try this:

$(".parent").hover(function() {
    $(this).append("<div class=\"delete\" style=\"display:inline;width:20px;height:20px;background-color:blue;\">X</div>");
}, function() {
    $(this).children(":last").remove();
});

$(".delete").click(function() {
    alert("hello");
});

[HelloJarvis]

This works better for inserting and removing from the div, but the click isn't called.

[minitauros]

I'm not sure but what you could try is containing the

$(".delete").click(function() {
    alert("hello");
});

part inside the first function of your hover() function.

[HelloJarvis]

Are you saying I should append that JavaScript to the div?

[minitauros]

No What I'm saing is you could try this (no idea if it'll work though, just a thought):

$(".parent").hover(function() 
{
    $(this).append("<div class=\"delete\" style=\"display:inline;width:20px;height:20px;background-color:blue;\">X</div>");

    $(".delete").click(function() {
        alert("hello");
    });
}, 
function() 
{
    $(this).children(":last").remove();
});

:)

[HelloJarvis]

What I did was just have an x button be hidden for each div when the page loaded and did an onclick for that. Thank you though!