Question

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

我遇到的问题是，当我使用jQuery .remove()时，li从DOM中移除但是jQuery不会消失。因此，例如，即使所有的li都消失，调用.has(".li")也会返回true，并且调用childNodes.length会返回li中曾存在的ol的总数。代码如下：

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

我很确定this不是问题所在，因为我一直小心地在从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>

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

Answer 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>");
    }
}

Answer 2

根据您的代码，您似乎删除了“a”标记，但不删除父代。

$(element).remove(); //This removes the a tag
$(element).parents('li').remove(); //This removes the parent li element

使用jQuery .remove（）从<ol>中取出<li>元素，但DOM仍然认为<li>元素在那里？</li> </ol> </li>

2 个答案: