2

我有一个功能，可以在您单击图标时从其中删除li元素。ol当ol完全清空时，我想用一些填充材料替换 ，以便用户仍然可以将新元素li拖放到列表中。li（这是一种购物车设置。）

我遇到的问题是，当我使用 jQuery 时.remove()，li它已从 DOM 中删除，但 jQuery 并没有消失。因此，例如，.has(".li")即使所有 li 都消失了，调用也会返回 true，并且调用会childNodes.length返回. 代码如下：liol

 function onClick(element)
        var parent = $(element).parent().attr('id');
        $(element).remove();
        var container = document.getElementById(parent);
        console.log(container.childNodes.length); //always logs the total number that have ever existed

        if(container.childNodes.length < 1){
            parent.append("<li class='placeholder'>Drag and Drop Components Here</li>");

我很确定这不是问题，因为只有在元素从 DOM 中删除后，我才小心地抓取父容器。

有任何想法吗？

编辑：请求ul和li结构：

<h4>Components</h4>
     <ol id="components" class="droppable">
         <li class="placeholder">Drag and Drop Components Here</li>
     </ol>

用户将以下代码拖放到列表中，该列表是通过$.get一些 php 脚本检索的。

     <li id="$id"><table style="color:white"><tr><td>$this->longname</td>
     <td><a href="#$id" onclick="destrComp(this);" title="Delete this image" class="ui-icon ui-icon-circle-close">Delete image</a></div></td></tr></table></li>

点击处理程序是上面的代码。

4

2 回答 2

1

假设您放错了函数名onClick而不是destrComp，则存在多个问题。

对于单击处理程序，您传递的是单击的锚元素而不是li您假设的元素，因此当您说$(element).parent()或者$(element).remove()它没有处理您认为它正在处理的元素时。

尝试

function destrComp(element) {
    var $parent = $(element).closest('ul');
    $(element).closest('li').remove();

    if ($parent.children().length < 1) {
        $parent.append("<li class='placeholder'>Drag and Drop Components Here</li>");
    }
}
于 2013-10-19T14:06:58.057 回答
1

根据您的代码，您似乎要删除“a”标签，而不是父标签。

$(element).remove(); //This removes the a tag
$(element).parents('li').remove(); //This removes the parent li element
于 2013-10-19T14:13:34.713 回答