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

у меня есть следующие коды dojo для создания графического элемента поверхности под 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, а затем создать снова. Как я могу добавить некоторые коды dojo для этого?

7 117
javascript dojo

7 ответов:

while (node.hasChildNodes()) {
    node.removeChild(node.lastChild);
}
268
node.innerHTML = "";

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

41

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

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

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

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

surface.clear();

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

25

в 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 методы безопасно удаляет все дочерние элементы узла.

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

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

dojo.html._emptyNode(node);
3

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

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

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

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

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

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

3