Question

我希望每个文件夹旁边有2张图片。第1张图片，点击它可以创建子文件夹。第2张图片，点击哪个文件夹本身及其所有子文件夹被删除

这是我的代码..它可以创建子文件夹，但无法删除。我是javascript的新手...帮助我

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Javascript Directory code</title>

<style>
ul 
{
list-style-image:url('closed.gif');
}
</style>


</head>

<body>
<ul>
    <li onClick="myFunction.call(this, event)" id="root">Root</li>
</ul>


<script language="javascript" type="text/javascript">
function myFunction(e)
{
    e.stopPropagation();

    var id=prompt("Enter Folder id");
    if (id != '' && id != null)
    {
        var val=prompt("Enter Folder name");
    }
    if (id != '' && id != null && val !='' && val !=null) 
    {
        var ulnode=document.createElement("UL"); //new ul<br>
        var node=document.createElement("LI"); //new li<br>
        node.id = id;//set id of new li <br>
        node.onclick = myFunction;//set onclick event of new li<br> 

        var textnode=document.createTextNode(val);//li value<br>
        node.appendChild(textnode);// new li + li value<br>
        ulnode.appendChild(node);// ul + li value

        this.appendChild(ulnode);
    }
}
</script>

</body>
</html>

Answer 1

如果您要使用jQuery，可以在函数中使用$('#id-of-folder').remove();将其从DOM中删除。

Answer 2

这可能有效：

        function myFunction(e)
        {
            e.stopPropagation();

            var id=prompt("Enter Folder id");
            if (id != '' && id != null)
            {
                var val=prompt("Enter Folder name");
            }
            if (id != '' && id != null && val !='' && val !=null) 
            {
                var ulnode=document.createElement("UL"); //new ul<br>
                var node=document.createElement("LI"); //new li<br>
                node.id = id;//set id of new li <br>
                node.onclick = myFunction;//set onclick event of new li<br>
                var anc=document.createElement("A"); //new li<br>
                anc.innerHTML = "---";
                anc.onclick = deleteNode;
                node.appendChild(anc);// new li + li value<br>);// new li + li value<br>

                var textnode=document.createTextNode(val);//li value<br>
                node.appendChild(textnode);// new li + li value<br>
                ulnode.appendChild(node);// ul + li value

                this.appendChild(ulnode);
            }
        }
        function deleteNode(e){
            e.stopPropagation();
            var caller = e.target || e.srcElement;
            var childToRemove = caller.parentNode.parentNode;
            childToRemove.parentNode.removeChild(childToRemove);
        }

如何使用onclick javascript动态添加，删除列表中的节点

2 个答案: