Question

我在删除动态添加到DOM的元素时遇到了一些麻烦。下面脚本中的所有内容都按预期工作，但mouseleave处理程序中的remove方法除外。我的猜测是我用CSS选择器犯了一个错误，但我不确定它是什么。任何帮助将不胜感激！

<!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>

Answer 1

应该是

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

Answer 2

我只是使用jQuery的对象创建：

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);

并使用此mouseleave：

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

Answer 3

您可以将您创建的元素放入函数范围内的变量中，然后只需在其上调用remove（）...这样做的另一个好处就是不需要使用css选择器来重新找到它。

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

Answer 4

试着让它生效

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

DOM是动态生成的，所以live会在它生成时抓住它

Answer 5

当尝试使用jQuery的子关系遍历DOM时，偶尔会出现问题和注意事项。例如，即使它实际上不存在，也始终存在包含表的内部信息的TBODY元素。因此，我试图避免我不得不担心这种事情的情况。由于您正在处理基本上是鼠标悬停的情况，因此可能更容易将myChildDiv元素保存到全局变量，然后在mouseleave事件上调用myChildDiv.remove（）。

编辑：看起来zzzrByte已经推荐了这个，但我会留下我的答案，因为它首先描述了可能导致问题的原因。

难以通过JQuery删除Div元素

5 个答案: