Удалите все дочерние элементы 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 для этого?

Ответы

Ответ 1

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

Ответ 2

node.innerHTML = "";

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

Ответ 3

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

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

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

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

surface.clear();

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

Ответ 4

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

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

В более раннем Dojo используйте dojo.empty(String|DomNode) (устарел на Dojo 1.8):

dojo.empty( id or DOM node );

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

Ответ 5

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

Ответ 6

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

dojo.html._emptyNode(node);

Ответ 7

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

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

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

Подробнее см. документацию "dom-construct" .

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

Уничтожает элемент DOM. destroy() удаляет всех детей и сам node.