jquery div 在 td 问题中删除答案

【问题标题】：jquery div remove in a td issuejquery div 在 td 问题中删除
【发布时间】：2015-11-03 09:54:15
【问题描述】：

我对 jQuery 和 .remove() 有一点小问题。

我有一个td，在td 里面我有一个div。当我单击td 时，我想显示div。当它可见时，我可以单击 div 并在单击后将其删除。

我使用以下 javascript 代码：

$("td").click(function () {
    $(".dragDiv").show();
});

$("#1").on("click", function () {
    $(this).remove();
});

删除工作正常，但在我调用 .remove() 后，我无法再次单击 td。什么都没发生。

那么有什么问题吗？任何帮助，不胜感激！！

这是一个有效的JSFIDDLE

【问题讨论】：

标签： jquery html html-table

【解决方案1】：

可以使用toggle函数，更适合阅读代码，也不复杂。

$('td').on('click', function() {
    $('#1').toggle();
});

所以，当您在 td 元素上 click 时（我们使用 on 是因为 jQuery 将来会弃用速记函数），您是在询问是否显示 div#1。如果没有，则隐藏该元素。

【讨论】：

【解决方案2】：

.remove() 从字面上删除 div。你应该使用.hide() 或`.addClass('hide');

【讨论】：

【解决方案3】：

点击事件后，td 上的点击事件仍然有效，然后删除 div。问题是 div 被删除，就像消失了一样。所以没有什么可显示的，并且随着那个元素消失，那里不再有一个带有事件的元素。

你可能想要隐藏。

$("#1").on("click", function () {
    $(this).hide();
});

这只是将display:none 设置为隐藏元素而不是永久删除它。

这给您的代码带来了另一个问题，即 div id=1（建议 id 不以数字开头）嵌套在 td 元素内。因此，当 div 上的 click 事件发生时，它也会传播到 td。这意味着一旦显示 div，它将隐藏，并且事件将传播到 td 并再次显示它以防止它隐藏。这可能是您最初的问题以及为什么 remove 似乎有效。

为了防止这种情况发生，需要参加活动并致电event.stopPropagation()。 jQuery 通过使用return false 提供了执行此操作的快捷方式（除了 event.preventDefault()）。看起来像这样：

$("#1").on("click", function () {
    $(this).hide();
    return false;
});

【讨论】：

【解决方案4】：

如果您的意图是删除元素（而不是隐藏它），那么您可能需要查看 .detach() 函数。它会暂时从 DOM 中移除元素，并可以作为参数值使用。

<table border="1">
    <tr>
        <td>test
            <div id="1" class="dragDiv" style="height:100px; width:100px; display:none;">Test</div>
        </td>
    </tr>
</table>

var detachedEle;

$("td").click(function () {
    if(detachedEle){
     detachedEle.appendTo("tr td");   
        $(".dragDiv").hide();
        detachedEle = null;
        return;
    }
      $(".dragDiv").show();
});

$("#1").on("click", function () {
   detachedEle = $(this).detach();
});

http://jsfiddle.net/kz1wmajL/2/

【讨论】：