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

126

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

javascript dojox.gfx David.Chu.ca
источник

Ответы:

286 
while (node.hasChildNodes()) {
    node.removeChild(node.lastChild);
}
Морис Перри
источник
17
Просто чтобы быть педантичным - удаление узлов DOM без соответствующих объектов JS приведет к утечке памяти.
Евгений Лазуткин
2
@ Евгений: Не могли бы вы рассказать об этом поподробнее?
Том Андерсон
7
@Tom: dojox.gfx создает объекты JavaScript для связи с базовой графической системой, которая может иметь узлы DOM (SVG, VML) или нет (Silverlight, Flash, Canvas). Удаление узлов DOM из DOM не удаляет эти объекты JavaScript, а также не удаляет узлы DOM, потому что объекты JavaScript все еще имеют ссылки на эти узлы DOM. Правильный способ справиться с этой ситуацией описан в моем ответе на этот вопрос.
Евгений Лазуткин
3
@robocat Это не имеет ничего общего с IE: объекты JS ссылаются на объекты DOM, сохраняя их в памяти, а базовые объекты JS хранятся в памяти посредством ссылок из других объектов JS. Например: поверхность gfx ссылается на всех своих дочерних элементов, группа также ссылается на всех своих дочерних элементов и так далее. Недостаточно удалить только узлы DOM.
Евгений Лазуткин
3
@ david-chu-ca - возможно, более поздний ответ Юджина (основного автора библиотеки dojo GFX) следует отметить как принятый. Евгений - спасибо за разъяснения.
robocat
45 
node.innerHTML = "";

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

Четан С
источник
2
Не поддерживается в IE. Проверьте: theogray.com/blog/2009/06/…
Раджат
4
Кажется стандартным для HTML 5. Вышеупомянутая запись в блоге была ошибкой пользователя. developer.mozilla.org/en-US/docs/DOM/element.innerHTML
svachalek 05
Я почти уверен, что это может вызвать проблемы, если дочерние узлы DOM будут использоваться повторно, потому что это «очищает» (устанавливает в пустое значение) дочерние узлы DOM.
robocat 02
Также согласно пользователю stwissel: innerHTML работает только в том случае, если вы имеете дело только с HTML. Если есть, например, SVG внутри, будет работать только удаление элемента.
робот
6
И медленнее по сравнению с удалением узлов: jsperf.com/innerhtml-vs-removechild/15
robocat 02
24

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

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

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

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

surface.clear();

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

Евгений Лазуткин
источник
Не могли бы вы еще добавить, как создать поверхность? Это может быть непонятно для таких пользователей, как я :) Спасибо
Лука Боррионе
20 
while(node.firstChild) {
    node.removeChild(node.firstChild);
}
Джеймс
источник
1
jQuery 1.x empty () работает именно так. В jQuery 2.x, который поддерживает только современные браузеры, empty () использует, elem.textContent = ""; однако, только потому, что jQuery делает это, не означает, что он не содержит ошибок, например, stwissel говорит: «innerHTML работает только в том случае, если вы имеете дело только с HTML. Если есть, например, Будет работать только SVG внутри, удаление элементов ". Также см. Другие соответствующие примечания здесь: stackoverflow.com/questions/3955229/…
robocat 02
18

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

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

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

dojo.empty( id or DOM node );

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

Брайан С
источник
2

Если вы ищете современный способ> 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 () удаляет всех потомков и сам узел.

Руи Маркес
источник
1
Он только хочет, чтобы убрали детей, значит domConstruct.empty(), в данном случае будет лучше.
g00glen00b