ජාවාස්ක්‍රිප්ට් හි DOM නෝඩයක සියලුම ළමා අංග ඉවත් කිරීමට මා යන්නේ කෙසේද?

මට පහත (කැත) HTML ඇති බව පවසන්න:

<p id="foo">
    <span>hello</span>
    <div>world</div>
</p>

මට අවශ්‍ය පරිදි නෝඩ් එක අල්ලා ගනිමි:

var myNode = document.getElementById("foo");

මම කොහොමද දරුවන් ඉවත් කළ හැකි fooඅතර එම නිසා <p id="foo"></p>ඉතිරි?

මට කළ හැකිද:

myNode.childNodes = new Array();

නැත්නම් මම යම් සංයෝජනයක් භාවිතා කළ removeElementයුතුද?

මම කැමතියි පිළිතුර කෙළින්ම DOM කිරීමට; අමතර ලකුණු වුවද, ඔබ jQuery හි පිළිතුරක් සමඟ DOM පමණක් පිළිතුර ලබා දෙන්නේ නම්.

විකල්ප 1 ඒ: නිෂ්කාශනය innerHTML.

• මෙම ප්‍රවේශය සරලයි, නමුත් ඉහළ කාර්යසාධනයක් සහිත යෙදුම් සඳහා එය සුදුසු නොවනු ඇත, මන්ද එය බ්‍රව්සරයේ HTML විග්‍රහකය ඉල්ලා සිටින හෙයිනි (බ්‍රවුසරයේ අගය හිස් නූලක් වන අවස්ථාව සඳහා ප්‍රශස්තිකරණය කළ හැකි වුවද ).

doFoo.onclick = () => {
  const myNode = document.getElementById("foo");
  myNode.innerHTML = '';
}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <span>Hello</span>
</div>
<button id='doFoo'>Remove via innerHTML</button>

විකල්ප 1 බී: නිෂ්කාශනය textContent

• ඉහත පරිදි, නමුත් භාවිතා කරන්න .textContent. එම්ඩීඑන් ට අනුව මෙය innerHTMLබ්‍රව්සර් ඔවුන්ගේ HTML විග්‍රහ කරන්නන්ට වඩා වේගවත් වන අතර ඒ වෙනුවට මූලද්‍රව්‍යයේ සියලුම දරුවන් එක #textනෝඩයකින් ආදේශ කරනු ඇත .

doFoo.onclick = () => {
  const myNode = document.getElementById("foo");
  myNode.textContent = '';
}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <span>Hello</span>
</div>
<button id='doFoo'>Remove via textContent</button>

විකල්ප 2 A: සියල්ල ඉවත් කිරීමට ලූප කිරීම lastChild:

• මෙම පිළිතුරට පෙර සංස්කරණයක් firstChildභාවිතා lastChildකරන ලද නමුත් පරිගණක විද්‍යාවේදී මෙන් මෙය යාවත්කාලීන කරන ලදි, පොදුවේ ගත් කල , අන්තිම ඉවත් කිරීම සැලකිය යුතු වේගයකින් සිදු වේ පළමු අංගය ඉවත් කිරීමට වඩා එකතුවක අංගය (එකතුව ක්‍රියාත්මක කරන ආකාරය අනුව) ).
• ලූපය දිගටම පරීක්ෂා කරයි firstChild පමණක් නඩුවේ ඒ සඳහා පරීක්ෂා කිරීමට වඩා වේගවත් firstChildවඩා lastChild(උදා: අංගයක් ලැයිස්තුව යුනියන් ඇෂුවරන්ස් විසින් අධ්යක්ෂණය සබැඳි ලැයිස්තුවක් ලෙස මෙය ක්රියාත්මක වේ නම්).

doFoo.onclick = () => {
  const myNode = document.getElementById("foo");
  while (myNode.firstChild) {
    myNode.removeChild(myNode.lastChild);
  }
}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <span>Hello</span>
</div>
<button id='doFoo'>Remove via lastChild-loop</button>

විකල්ප 2 බී: සෑම දෙයක්ම ඉවත් කිරීම සඳහා ලූප කිරීම lastElementChild:

• මෙම ප්‍රවේශය සියලු නොවන Element(එනම් #textනෝඩ් සහ<!-- comments --> හා මේ ඔබගේ අයදුම් යෝග්ය විය හැකිය (ගබඩා සැකිල්ල උපදෙස් භාවිතා පේළිගත HTML අදහස් බව උදා: සමහර templating පද්ධති) - මව් (නමුත්, ඔවුන්ගෙන් පැවත) දරුවන්).
• ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් lastElementChildIE9 සඳහා පමණක් සහය එක් කළ බැවින් මෙම ප්‍රවේශය මෑත වසර දක්වා භාවිතා නොවීය .

doFoo.onclick = () => {
  const myNode = document.getElementById("foo");
  while (myNode.lastElementChild) {
    myNode.removeChild(myNode.lastElementChild);
  }
}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <!-- This comment won't be removed -->
  <span>Hello <!-- This comment WILL be removed --></span>
  <!-- But this one won't. -->
</div>
<button id='doFoo'>Remove via lastElementChild-loop</button>

පාරිතෝෂිකය: Element.clearChildrenවඳුරු පැච්:

• අපට නව ක්‍රමයක්-දේපළක් එකතු කළ හැකිය Element පමණක් එය කැඳවමින් සරල කිරීම සඳහා ජාවාස්ක්රිප්ට් තුල මූලාකෘතියක් el.clearChildren()(එහිදී elවේ ඕනෑම HTML අංගයක් වස්තුව).
• .

if( typeof Element.prototype.clearChildren === 'undefined' ) {
    Object.defineProperty(Element.prototype, 'clearChildren', {
      configurable: true,
      enumerable: false,
      value: function() {
        while(this.firstChild) this.removeChild(this.lastChild);
      }
    });
}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <span>Hello <!-- This comment WILL be removed --></span>
</div>
<button onclick="this.previousElementSibling.clearChildren()">Remove via monkey-patch</button>

innerHTMLM93a නිවැරදිව සඳහන් කර ඇති පරිදි දැනට පිළිගත් පිළිතුර මන්දගාමී වීම (අවම වශයෙන් IE සහ Chrome හි) වැරදිය.

මෙම ක්‍රමය භාවිතා කරමින් ක්‍රෝම් සහ එෆ්එෆ් නාටකාකාර ලෙස වේගවත් වේ (එමඟින් අමුණා ඇති jquery දත්ත විනාශ වනු ඇත):

var cNode = node.cloneNode(false);
node.parentNode.replaceChild(cNode, node);

FF සහ Chrome සඳහා second ත තත්පරයකින් සහ IE හි වේගවත්ම:

node.innerHTML = '';

InnerHTML ඔබේ සිදුවීම් හසුරුවන්නන් විනාශ නොකරනු ඇත , jquery යොමු කිරීම් බිඳ දමන්නේ නැත , එයද මෙහි විසඳුමක් ලෙස නිර්දේශ කෙරේ: https://developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML .

වේගවත්ම DOM හැසිරවීමේ ක්‍රමය (පෙර දෙකට වඩා මන්දගාමී වේ) පරාසය ඉවත් කිරීම වේ, නමුත් IE9 තෙක් පරාසයන්ට සහය නොදක්වයි.

var range = document.createRange();
range.selectNodeContents(node);
range.deleteContents();

සඳහන් කර ඇති අනෙක් ක්‍රම සැසඳිය හැකි බව පෙනේ, නමුත් අභ්‍යන්තර HTML වලට වඩා මන්දගාමී වේ, පිටස්තරයා හැර, jquery (1.1.1 සහ 3.1.1), එය අන් සියල්ලටම වඩා මන්දගාමී ය:

$(node).empty();

මෙහි සාක්ෂි:

http://jsperf.com/innerhtml-vs-removechild/167 http://jsperf.com/innerhtml-vs-removechild/300 https://jsperf.com/remove-all-child-elements-of-a- dom-node-in-javascript (පැරණි url සංස්කරණය කිරීම ක්‍රියා නොකරන බැවින් jsperf නැවත ආරම්භ කිරීම සඳහා නව url)

Jsperf ගේ “per-test-loop” බොහෝ විට “per-iteration” ලෙස වටහා ගත හැකි අතර, ඉවත් කිරීමට පළමු පුනරාවර්තනයට පමණක් නෝඩ් ඇති බැවින් ප්‍රති results ල අර්ථ විරහිත වේ, පළ කරන අවස්ථාවේදී මෙම ත්‍රෙඩ් එකේ වැරදි ලෙස සකසා ඇත.

නවීන ජාවාස්ක්‍රිප්ට් භාවිතා කරන්න remove!

const parent = document.getElementById("foo")
while (parent.firstChild) {
    parent.firstChild.remove()
}

ES5 හි නෝඩ් ඉවත් කිරීම ලිවීමට මෙය නවතම ක්‍රමයකි. එය වැනිලා JS වන අතර කියවන බොහෝ මව් මත යැපෙනවාට වඩා හොදින් සලකනව.

සියලුම නවීන බ්‍රව්සර් සඳහා සහය දක්වයි.

බ්‍රව්සර් සහාය - 96% ජුනි 2020

var myNode = document.getElementById("foo");
var fc = myNode.firstChild;

while( fc ) {
    myNode.removeChild( fc );
    fc = myNode.firstChild;
}

ඔබට jQuery බලපෑමට ලක් වූ පරම්පරාවක් ඇති බවට කිසියම් අවස්ථාවක් තිබේ නම්, ඔබ jQuery දත්ත පිරිසිදු කරන යම් ක්‍රමයක් භාවිතා කළ යුතුය .

$('#foo').empty();

.empty()ඉවත් කරන ලද මූලද්‍රව්‍ය සමඟ සම්බන්ධිත ඕනෑම දත්තයක් පිරිසිදු කිරීම jQuery ක්‍රමය මඟින් සහතික කෙරේ.

ඔබ හුදෙක් DOMළමයින් ඉවත් කිරීමේ ක්‍රම භාවිතා කරන්නේ නම් , එම දත්ත පවතිනු ඇත.

ඔබ jQuery භාවිතා කරන්නේ නම්:

$('#foo').empty();

ඔබ එසේ නොකරන්නේ නම්:

var foo = document.getElementById('foo');
while (foo.firstChild) foo.removeChild(foo.firstChild);

වේගවත්ම...

var removeChilds = function (node) {
    var last;
    while (last = node.lastChild) node.removeChild(last);
};

Jsperf.com (සිසිල් වෙබ් අඩවිය!) වෙත සබැඳිය දැක්වීම ගැන ඇන්ඩ්‍රි ලුෂ්නිකොව්ට ස්තූතියි .

සංස්කරණය කරන්න: පැහැදිලිව කිවහොත්, ෆස්ට්චිල්ඩ් සහ අන්තිම චිල්ඩ් අතර ක්‍රෝම් හි කාර්ය සාධන වෙනසක් නොමැත. ඉහළ පිළිතුර කාර්ය සාධනය සඳහා හොඳ විසඳුමක් පෙන්වයි.

ඔබට අවශ්‍ය වන්නේ එහි දරුවන් නොමැතිව නෝඩය ලබා ගැනීමට නම් ඔබටත් මේ වගේ පිටපතක් සාදා ගත හැකිය:

var dupNode = document.getElementById("foo").cloneNode(false);

ඔබ සපුරා ගැනීමට උත්සාහ කරන දේ මත රඳා පවතී.

මෙන්න තවත් ප්‍රවේශයක්:

function removeAllChildren(theParent){

    // Create the Range object
    var rangeObj = new Range();

    // Select all of theParent's children
    rangeObj.selectNodeContents(theParent);

    // Delete everything that is selected
    rangeObj.deleteContents();
}

element.textContent = '';

එය සම්මත හැර අභ්‍යන්තර ටෙක්ස්ට් වැනි ය. එය වඩා ටිකක් මන්දගාමී ය removeChild(), නමුත් එය භාවිතා කිරීම පහසු වන අතර මකා දැමීමට තරම් දේවල් නොමැති නම් කාර්ය සාධන වෙනසක් ඇති නොකරනු ඇත.

ඩෑන්මන්, මාර්ටන් සහ මැට්ට ප්‍රතිචාර වශයෙන්. නෝඩ් ක්ලෝන කිරීම, පෙළ සැකසීම ඇත්ත වශයෙන්ම මගේ ප්‍රති .ලවල ශක්‍ය ක්‍රමයකි.

// @param {node} node
// @return {node} empty node
function removeAllChildrenFromNode (node) {
  var shell;
  // do not copy the contents
  shell = node.cloneNode(false);

  if (node.parentNode) {
    node.parentNode.replaceChild(shell, node);
  }

  return shell;
}

// use as such
var myNode = document.getElementById('foo');
myNode = removeAllChildrenFromNode( myNode );

මවුපිය නෝඩයට ප්‍රවේශ වීමට උත්සාහ කරන විට එය අහෝසි වන ඩොමේ නොවන නෝඩ් සඳහාද මෙය ක්‍රියා කරයි. ඊට අමතරව, ඔබට ආරක්ෂිත වීමට අවශ්‍ය නම් අන්තර්ගතය එක් කිරීමට පෙර නෝඩයක් හිස් ය. මෙය සැබවින්ම ප්‍රයෝජනවත් වේ. යටින් ඇති භාවිත නඩුව සලකා බලන්න.

// @param {node} node
// @param {string|html} content
// @return {node} node with content only
function refreshContent (node, content) {
  var shell;
  // do not copy the contents
  shell = node.cloneNode(false);

  // use innerHTML or you preffered method
  // depending on what you need
  shell.innerHTML( content );

  if (node.parentNode) {
    node.parentNode.replaceChild(shell, node);
  }

  return shell;
}

// use as such
var myNode = document.getElementById('foo');
myNode = refreshContent( myNode );

මූලද්රව්යයක් තුළ නූලක් ප්රතිස්ථාපනය කිරීමේදී මෙම ක්රමය ඉතා ප්රයෝජනවත් වේ, නෝඩයේ අඩංගු වන්නේ කුමක්දැයි ඔබට විශ්වාස නැත්නම්, අවුල පිරිසිදු කරන්නේ කෙසේද යන්න ගැන කරදර නොවී, නැවුම් ලෙස ආරම්භ කරන්න.

මෙන්න මම සාමාන්‍යයෙන් කරන්නේ:

HTMLElement.prototype.empty = function() {
    while (this.firstChild) {
        this.removeChild(this.firstChild);
    }
}

සහ වොයිලා, පසුව ඔබට ඕනෑම ඩොම් මූලද්‍රව්‍යයක් හිස් කළ හැකිය:

anyDom.empty()

පරාස ලූපයක් භාවිතා කිරීම මට වඩාත්ම ස්වාභාවික යැයි හැඟේ:

for (var child of node.childNodes) {
    child.remove();
}

ක්‍රෝම් සහ ෆයර්ෆොක්ස් හි මගේ මිනුම්වලට අනුව එය 1.3x පමණ මන්දගාමී වේ. සාමාන්‍ය තත්වයන් තුළ, මෙය සමහර විට වැදගත් නොවේ.

එය සාක්ෂාත් කර ගැනීම සඳහා විකල්ප කිහිපයක් තිබේ:

වේගවත්ම ():

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

විකල්ප (මන්දගාමී):

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

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

යෝජිත විකල්ප සමඟ මිණුම් ලකුණ

var empty_element = function (element) {

    var node = element;

    while (element.hasChildNodes()) {              // selected elem has children

        if (node.hasChildNodes()) {                // current node has children
            node = node.lastChild;                 // set current node to child
        }
        else {                                     // last child found
            console.log(node.nodeName);
            node = node.parentNode;                // set node to parent
            node.removeChild(node.lastChild);      // remove last node
        }
    }
}

මෙය මූලද්රව්යයේ ඇති සියලුම නෝඩ් ඉවත් කරයි.

අභ්‍යන්තර ටෙක්ස්ට් ජයග්‍රාහකයා වේ! http://jsperf.com/innerhtml-vs-removechild/133 . පෙර සිදු කරන ලද සියලුම පරීක්ෂණ වලදී, මව් නෝඩයේ අභ්‍යන්තර ඩොම් පළමු පුනරාවර්තනයේදී මකාදමා ඇති අතර පසුව හිස් HT සඳහා යොදන අභ්‍යන්තර HTML හෝ ඉවත් කරන්න.

ජාවාස්ක්‍රිප්ට් හරහා නෝඩ් එකක ළමා නෝඩ් ඉවත් කිරීමේ සරලම ක්‍රමය

var myNode = document.getElementById("foo");
while(myNode.hasChildNodes())
{
   myNode.removeChild(myNode.lastChild);
}

මිනිස්සු කරන දේ මම දැක්කා:

while (el.firstNode) {
    el.removeChild(el.firstNode);
}

එවිට යමෙක් පැවසුවේ භාවිතා el.lastNodeකිරීම වේගවත් බවයි

කෙසේ වෙතත් මෙය වේගවත්ම යැයි මම සිතමි:

var children = el.childNodes;
for (var i=children.length - 1; i>-1; i--) {
    el.removeNode(children[i]);
}

ඔයා සිතන්නේ කුමක් ද?

ps: මෙම මාතෘකාව මට ජීවිතාරක්ෂකයෙක් විය. මගේ ෆයර්ෆොක්ස් ඇඩෝන ප්‍රතික්ෂේප විය, මම අභ්‍යන්තර HTML භාවිතා කළෙමි. එය දිගු කලක් තිස්සේ පුරුද්දක් වී තිබේ. ඊටපස්සේ මම මේක වැරදියි. මම ඇත්තටම වේග වෙනසක් දුටුවා. අභ්‍යන්තර html යාවත්කාලීන කිරීමට ටික වේලාවක් ගතවිය, කෙසේ වෙතත් එහි ක්ෂණික එකතු කිරීම මඟින්!

 let el = document.querySelector('#el');
 if (el.hasChildNodes()) {
      el.childNodes.forEach(child => el.removeChild(child));
 }

සාමාන්‍යයෙන්, ජාවාස්ක්‍රිප්ට් DOM නෝඩ් වල ලැයිස්තු යොමු කිරීම සඳහා අරා භාවිතා කරයි. එබැවින්, HTMLElements අරාව හරහා එය කිරීමට ඔබට උනන්දුවක් ඇත්නම් මෙය මනාව ක්‍රියාත්මක වේ. එසේම, සඳහන් කිරීම වටී, මන්ද මම ජාවාස්ක්‍රිප්ට් ප්‍රෝටෝ වෙනුවට අරා යොමු කිරීමක් භාවිතා කරන බැවින් මෙය IE ඇතුළු ඕනෑම බ්‍රව්සරයක ක්‍රියා කළ යුතුය.

while(nodeArray.length !== 0) {
  nodeArray[0].parentNode.removeChild(nodeArray[0]);
}

ඇයි අපි මෙහි සරලම ක්‍රමය අනුගමනය නොකරන්නේ ඇතුළත "ඉවත් කරන්න".

const foo = document.querySelector(".foo");
while (foo.firstChild) {
  foo.firstChild.remove();     
}

• දෙමව්පියන් තෝරා ගැනීම div
• කිසිවක් ඉතිරි නොවන තෙක් පළමු ළමා අංගය තුරන් කිරීම සඳහා ටික වේලාවක් තුළ "ඉවත් කරන්න" ක්‍රමය භාවිතා කිරීම.

යමෙකු මෙම ප්‍රශ්නය තවත් තැනක සඳහන් කර ඇති බව දුටු මම තවම නොදකින ක්‍රමයක් එකතු කරමි යැයි සිතුවෙමි:

function clear(el) {
    el.parentNode.replaceChild(el.cloneNode(false), el);
}

var myNode = document.getElementById("foo");
clear(myNode);

පැහැදිලි කාර්යය වන්නේ මූලද්‍රව්‍යය රැගෙන මවුපියන්ගේ නෝඩය භාවිතා කර එහි දරුවන් නොමැතිව පිටපතක් ආදේශ කිරීමයි. මූලද්‍රව්‍යය විරල නම් වැඩි කාර්ය සාධනයක් නොලැබෙන නමුත් මූලද්‍රව්‍යයට නෝඩ් පොකුරක් ඇති විට කාර්ය සාධන වාසි සාක්ෂාත් වේ.

ක්‍රියාකාරී පමණක් ප්‍රවේශය:

const domChildren = (el) => Array.from(el.childNodes)
const domRemove = (el) => el.parentNode.removeChild(el)
const domEmpty = (el) => domChildren(el).map(domRemove)

DomChildren හි ඇති "childNodes" මඟින් ළමුන්ගේ මූලද්‍රව්‍යයන්ගේ නෝඩ් ලැයිස්තුවක් ලබා දෙනු ඇත, එය කිසිවක් සොයාගත නොහැකි වූ විට හිස් වේ. NodeList හරහා සිතියම් ගත කිරීම සඳහා, domChildren එය අරාව බවට පරිවර්තනය කරයි. domEmpty විසින් ශ්‍රිතයක් සිතියම් ගත කරයි එය ඉවත් කරන සියලුම මූලද්‍රව්‍යයන් මත ඉවත් කරන්න.

උදාහරණ භාවිතය:

domEmpty(document.body)

සියලුම දරුවන් ශරීර මූලද්‍රව්‍යයෙන් ඉවත් කරයි.

පහත දැක්වෙන බහාලුමකින් ඔබට සියලුම ළමා අංග ඉවත් කළ හැකිය:

function emptyDom(selector){
 const elem = document.querySelector(selector);
 if(elem) elem.innerHTML = "";
}

දැන් ඔබට ශ්‍රිතය අමතා පහත පරිදි තේරීම් කාරකය පසු කළ හැකිය:

මූලද්රව්යයේ id = foo තිබේ නම්

emptyDom('#foo');

මූලද්රව්යයේ class = foo තිබේ නම්

emptyDom('.foo');

මූලද්‍රව්‍යයට ටැග් = < div > තිබේ නම්

emptyDom('div')

elm.replaceChildren()

පුළුල් ආධාරයකින් තොරව එය පර්යේෂණාත්මක ය, නමුත් පරාමිතීන් නොමැතිව ක්‍රියාත්මක වන විට ඔබ ඉල්ලන දේ කරනු ඇති අතර, එය සෑම දරුවෙකුටම ලිහිල් කර ඉවත් කිරීමට වඩා කාර්යක්ෂම වේ. දැනටමත් සඳහන් කර ඇති පරිදි, අභ්‍යන්තර HTML හිස් නූලකින් ප්‍රතිස්ථාපනය කිරීම සඳහා බ්‍රව්සරයේ කොටසෙහි HTML විග්‍රහ කිරීම අවශ්‍ය වේ.

මෙහි ලේඛනගත කිරීම .

element.innerHTML = ""(හෝ .textContent) වේ බොහෝ දුරට වේගවත්ම විසඳුම

මෙහි බොහෝ පිළිතුරු පදනම් වී ඇත්තේ දෝෂ සහිත පරීක්ෂණ මත ය

උදාහරණයක් ලෙස: https://jsperf.com/innerhtml-vs-removechild/15
මෙම පරීක්ෂණය මඟින් එක් එක් පුනරාවර්තනය අතර ඇති මූලද්‍රව්‍යයට නව දරුවන් එකතු නොවේ. පළමු පුනරාවර්තනය මඟින් මූලද්‍රව්‍යයේ අන්තර්ගතය ඉවත් කරනු ඇති අතර අනෙක් සෑම ක්‍රියාවක්ම පසුව කිසිවක් නොකරයි. මෙම අවස්ථාවේ දී, while (box.lastChild) box.removeChild(box.lastChild)වේගවත් වූයේ box.lastChild කාලය 99% ක් වූ බැවිනිnull

මෙන්න නිසි පරීක්ෂණයකි: https://jsperf.com/innerhtml-conspiracy

අවසාන වශයෙන්, භාවිතා නොකරන්නnode.parentNode.replaceChild(node.cloneNode(false), node) . මෙය ළමයින් නොමැතිව නෝඩ් එකෙහි පිටපතක් ආදේශ කරනු ඇත. කෙසේ වෙතත්, මෙය සිදුවීම් සවන්දෙන්නන් ආරක්ෂා නොකරන අතර නෝඩය පිළිබඳ වෙනත් කිසිදු සඳහනක් බිඳ දමයි.

IE පමණි:

parentElement.removeNode(true);

true - ගැඹුරින් ඉවත් කිරීම යන්නෙන් අදහස් වන්නේ - එයින් අදහස් කරන්නේ සියලුම ළමයින් ඉවත් කරන බවයි

පහසුම ක්‍රමය:

let container = document.getElementById("containerId");
container.innerHTML = "";

සරල හා වේගවත් ලූපයක් සඳහා භාවිතා කිරීම !!

var myNode = document.getElementById("foo");

    for(var i = myNode.childNodes.length - 1; i >= 0; --i) {
      myNode.removeChild(myNode.childNodes[i]);
    }

මෙය <span>ටැගයෙන් ක්‍රියා නොකරනු ඇත !

JQuery හි වෙනත් ක්‍රම

var foo = $("#foo");
foo.children().remove();
//or
$("*", foo ).remove();
//or
foo.html("");
//or
foo.empty();

ඔබට නැවත යමක් දැමීමට අවශ්‍ය නම් div, ඒinnerHTML එය වඩා හොඳය.

මගේ උදාහරණය:

<ul><div id="result"></div></ul>

<script>
  function displayHTML(result){
    var movieLink = document.createElement("li");
    var t = document.createTextNode(result.Title);
    movieLink.appendChild(t);
    outputDiv.appendChild(movieLink);
  }
</script>

මම .firstChildහෝ .lastChildක්‍රමය භාවිතා කරන්නේ නම් displayHTML()ශ්‍රිතය පසුව ක්‍රියා නොකරයි, නමුත් .innerHTMLක්‍රමවේදය සමඟ ගැටළුවක් නොමැත .