Question

我想制作按钮，删除按钮所在的div。

此当前解决方案仅删除当前div临时，但我希望它完全从此html文件中删除。这可能吗？

到目前为止我已经完成了：

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <link rel="stylesheet" media="screen" type="text/css" href="styles.css"/>
 <title>Orders</title>
 <center>
 <style>
  div 
  {width:797px;
  border:2px solid; 
  background-color:white;
  text-align:left;
  margin-bottom:2px;}
 </style>
<script type="text/javascript">
 function deleteline(buttonObj)
 {
 var node = buttonObj;
 do
 {
 node = node.parentNode;
 }
 while
 (node.nodeType != 1 && node.nodeName != 'div');
 node.parentNode.removeChild(node);
 }
</script>
</head>
<center><a href=panel.html>back</a></center>

<div>
<input type="button" onclick="deleteline(this)" value="Remove this DIV" />
</div>

Answer 1

但是我希望它完全从这个html文件中删除。

关键是你可以使用JavaScript实际上创建客户端更改，所以如果你真的想从你的html文件中删除div元素，你唯一能做的就是创建一个服务器端API并做对该API的XHR请求，然后在服务器端删除它。

另一种模拟方法是在div元素上设置一个ID，并在删除后使用localStorage将该元素的最后一个状态保存在客户端中，如：

function deleteline(buttonObj){
    var node = buttonObj;
     do {
         node = node.parentNode;
     }
     while (node.nodeType != 1 && node.nodeName != 'div');
     node.parentNode.removeChild(node);

     var deleted_divs = localStorage["deleted_divs"];
     var deletedDivs = deleted_divs ? JSON.parse(deleted_divs) ? [];
     deletedDivs.push(node.id);
     localStorage["deleted_divs"] = JSON.stringify(deletedDivs);
}

然后在DOM加载时检查它：

document.addEventListener("DOMContentLoaded", function(event) {
    var deleted_divs = localStorage["deleted_divs"];
    if(deleted_divs){
        var deletedDivs = JSON.parse(deleted_divs),
            i = 0,
            l = deletedDivs.length;
        for( ; i < l ; i++){
            var el = document.getElementById(deletedDivs[i]);
            if( el ){
                el.parentNode.removeChild(el);
            }
        }
    }
});

如何制作删除div所在位置的按钮？

1 个答案: