Удалите все дочерние элементы DOM в div

StackOverflow https://stackoverflow.com/questions/683366

  •  22-08-2019
  •  | 
  •  

Вопрос

У меня есть следующие коды dojo для создания графического элемента surface под div:

....
<script type=text/javascript>
....
   function drawRec(){
      var node = dojo.byId("surface");
      //   remove all the children graphics
      var surface = dojox.gfx.createSurface(node, 600, 600);

      surface.createLine({
         x1 : 0,
         y1 : 0,
         x2 : 600,
         y2 : 600
      }).setStroke("black");
   }
....
</script>
....
<body>
<div id="surface"></div>
....

drawRec() нарисуем прямоугольную графику в первый раз.Если я снова вызову эту функцию в привязке href следующим образом:

 <a href="javascript:drawRec();">...</a>

он снова нарисует другую графику.Что мне нужно, чтобы очистить всю графику под div, а затем создать снова.Как я могу добавить некоторые коды додзе, чтобы сделать это?

Это было полезно?

Решение 

while (node.hasChildNodes()) {
    node.removeChild(node.lastChild);
}

Другие советы

node.innerHTML = "";

Нестандартный, но быстрый и хорошо поддерживаемый.

Прежде всего, вам нужно один раз создать поверхность и хранить ее где-нибудь под рукой.Пример:

var surface = dojox.gfx.createSurface(domNode, widthInPx, heightInPx);

domNode обычно это ничем не украшенный <div>, который используется в качестве заполнителя для поверхности.

Вы можете очистить все на поверхности за один раз (все существующие объекты shape станут недействительными, после этого не используйте их).:

surface.clear();

Все функции и методы, связанные с surface, можно найти в официальной документации по dojox.gfx.Поверхность.Примеры использования можно найти в dojox/gfx/tests/.

while(node.firstChild) {
    node.removeChild(node.firstChild);
}

В Dojo 1.7 или новее используйте domConstruct.empty(String|DomNode):

require(["dojo/dom-construct"], function(domConstruct){
  // Empty node's children byId:
  domConstruct.empty("someId");
});

В старых додзе используйте dojo.empty(String|DomNode) (устарел в Dojo 1.8):

dojo.empty( id or DOM node );

Каждый из этих empty методы безопасно удаляют все дочерние элементы узла.

Из API dojo Документация:

dojo.html._emptyNode(node);

Если вы ищете современный способ > 1.7 Dojo уничтожения всех дочерних узлов, это тот самый способ:

// Destroys all domNode's children nodes
// domNode can be a node or its id:
domConstruct.empty(domNode);

Безопасно очистите содержимое элемента DOM.empty() удаляет все дочерние элементы, но сохраняет узел там.

Ознакомьтесь с документацией "dom-construct" для получения более подробной информации.

// Destroys domNode and all it's children
domConstruct.destroy(domNode);

Уничтожает элемент DOM.destroy() удаляет все дочерние элементы и сам узел.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top