CODEWITHSUNDEEP
javascriptjquerycss
Andrew
Andrew

Reputation: 6514

Difficulty Removing Div Element Via JQuery

I'm having some trouble removing an element that gets added dynamically to the DOM. Everything in the script below works as it is supposed to, with the exception of the remove method inside the mouseleave handler. My guess is that I'm making a mistake with the CSS selector, but I'm not sure what it is. Any help will be much appreciated!

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Index</title>
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>


    <script type="text/javascript">
        $(function ()
        {
            $('#myTr').mouseenter(function ()
            {
                var cell1 = $(this).children(':first');
                cell1.css('position', 'relative');
                var myDiv = document.createElement('div');
                var myChildDiv = document.createElement('div');
                myChildDiv.style.position = 'absolute';
                myChildDiv.style.height = '20px';
                myChildDiv.style.width = '30px';
                myChildDiv.style.opacity = '0.6';
                myChildDiv.style.background = 'grey';
                $(cell1).prepend(myDiv);
                $(myDiv).append(myChildDiv);
            })
            .mouseleave(function ()
            {
                $(this).remove('td:first-child>div');
            });
        });
    </script>

</head>

<body>
<table>
    <tbody>
        <tr id="myTr">
            <td style="width: 200px;">
                Anytown, MA
            </td>
        </tr>

    </tbody>
</table>
</body>
</html>

Upvotes: 1

Views: 164

Answers (5)

Spencer Ruport
Spencer Ruport

Reputation: 35117

There are occasional gotchas and caveats when trying to traverse the DOM using jQuery's child relations. For example, even if it's not actually present there is always a TBODY element encompassing the inner information of a table. Consequently I try to avoid situations where I have to worry about this kind of thing. Since you're dealing with what is essentially a mouse hover situation it might be easier to just save your myChildDiv element to a global variable and then simply call myChildDiv.remove() on the mouseleave event.

EDIT: Looks like zzzrByte already recommended this but I'll leave my answer simply because it describes what might be causing the issue in the first place.

Upvotes: 1

Tal Ater
Tal Ater

Reputation: 1189

You could place the element you create into a variable in the scope of your function and then simply call remove() on it... This has the added benefit of not needing to use css selectors to find it again.

    $(function ()
    {
        var myDiv;
        $('#myTr').mouseenter(function ()
        {
            var cell1 = $(this).children(':first');
            cell1.css('position', 'relative');
            myDiv = document.createElement('div');
            var myChildDiv = document.createElement('div');
            myChildDiv.style.position = 'absolute';
            myChildDiv.style.height = '20px';
            myChildDiv.style.width = '30px';
            myChildDiv.style.opacity = '0.6';
            myChildDiv.style.background = 'grey';
            $(cell1).prepend(myDiv);
            $(myDiv).append(myChildDiv);
        })
        .mouseleave(function ()
        {
            $(myDiv).remove();
        });
    });

Upvotes: 2

Blender
Blender

Reputation: 298176

I'd just use jQuery's object creation:

var cell1 = $(this).children(':first');
cell1.css('position', 'relative');

var myDiv = $('<div />');
var myChildDiv = $('<div />');

myChildDiv.css({
  'position': 'absolute',
  'height': '20px',
  'width': '30px',
  'opacity': '0.6',
  'background-color': 'grey'
});

$(cell1).prepend(myDiv);
$(myDiv).append(myChildDiv);

And use this mouseleave:

$('td:first > div', this).remove();

Upvotes: 2

amit_g
amit_g

Reputation: 31250

It should be

$("td:first > div", $(this)).remove();

Upvotes: 2

Kyle Macey
Kyle Macey

Reputation: 8154

try making it live

.live('mouseleave', function ()
{
  $(this).remove('td:first-child>div');
});

The DOM is dynamically generated, so the live will grab it when it's made

Upvotes: 1

Related Questions