Как сделать кнопку, которая удаляет div, где он находится?

Question

Как сделать кнопку, которая удаляет div, где он находится?

0

Я хочу сделать кнопку, которая удаляет 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>

user3432456 20 март 2014, в 15:47

Источник

1

Вам нужно будет использовать localStorage, чтобы запомнить, что этот узел был удален, или отправить сообщение на сервер с просьбой об удалении этого узла.
MjrKusanagi 20 март 2014, в 14:01

Теги:

javascript

html

jscript

1 ответ

Ещё вопросы

Вам нужно будет использовать localStorage, чтобы запомнить, что этот узел был удален, или отправить сообщение на сервер с просьбой об удалении этого узла.

Mehran Hatami · Answer 1 · 2014-03-20T12-17-00.000Z

НО я хочу, чтобы он полностью удалялся из этого html файла.

Дело в том, что все, что вы можете сделать, используя JavaScript, может фактически создавать изменения на стороне клиента, поэтому, если вы действительно хотите удалить элемент div из своего html файла, единственное, что вы можете сделать, это создать API-интерфейс на стороне сервера и выполнить запрос XHR к этому API, затем удалите его на стороне сервера.

Другой способ имитировать это - установить идентификатор этого элемента div и сохранить последнее состояние этого элемента в клиенте с помощью 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);
            }
        }
    }
});