Member Avatar for serkan sendur

i searched google to do this and mostly i found this solution:

mydiv = document.getElementById('FirstDiv');while ( mydiv.firstChild ) mydiv.removeChild( mydiv.firstChild );

instead of doing such iterations, i basically did this and it worked successfully:

document.getElementById('FirstDiv').innerHTML ="";
  • 2 Contributors
  • 1 Reply
  • 131 Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by asdasdasdasdfsd

Dani AI

Generated

's quick innerHTML = "" fix often works, and is right to warn about edge cases (old IE, form controls). Short, practical summary and safe options.

For modern browsers use replaceChildren() to wipe children without parsing HTML, or use textContent when you only need to remove all child nodes (and any text). Example:

container.replaceChildren();
container.textContent = '';

replaceChildren is simple and fast; textContent removes nodes and text but won't interpret HTML. See ParentNode.replaceChildren and Node.textContent.

Special cases and fallbacks:

  • Select elements and some table-related nodes were historically buggy with innerHTML in older IE. To clear a <select> reliably across old browsers, use the options API:
select.options.length = 0;

(That directly empties the options collection; see HTMLSelectElement.options.)

  • If you must support very old browsers that lack replaceChildren, a small fallback is fine:
if (!Element.prototype.replaceChildren) {
  Element.prototype.replaceChildren = function() {
    while (this.lastChild) this.removeChild(this.lastChild);
  };
}

Cautions:

  • innerHTML rebuilds DOM from a string (watch out for XSS if the string contains untrusted data).
  • Removing nodes does not free memory if other code still holds references or attached handlers. Explicitly remove long-lived listeners or null references where necessary.
  • Libraries like jQuery provide helper methods (e.g., .empty()) that also remove jQuery-managed data/events; native methods do not.

This complements the thread: use innerHTML = "" for quick cases, prefer replaceChildren() or textContent for modern code, and fall back to DOM-removal loops or element-specific APIs (like options.length = 0) for compatibility.

Member Avatar for asdasdasdasdfsd

It doesn't work in all cases. Check for form's select object. I know that IE sucks, but tell it to most internet users.

The first solution is better one.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.