如何从 Javascript Dom 中删除子节点答案

【问题标题】：how to remove sub node from Javascript Dom如何从 Javascript Dom 中删除子节点
【发布时间】：2015-03-26 18:54:21
【问题描述】：

我有一个名为 MainNode 的 XML 节点。在这个节点内，我有四个其他节点，从 NodeOne 到 NodeFour。如何仅从 MainNode 中删除节点 2 和 3？

我的问题的第二部分：是否可以在不删除节点 1 和 4 的情况下删除 MainNode 以及子节点 2 和 3？下面是我的问题的 XML：

<MainNode>
    <NodeOne>one</NodeOne>
    <NodeTow>tow</NodeTow>
    <NodeThree>Thre</NodeThree>
    <NodeFour>Four</NodeFour>
</MainNode>

【问题讨论】：

MainNode.children[1].remove();MainNode.children[1].remove();将删除两个和三个
你能告诉我 Js Code 来做吗

标签： javascript xml dom

【解决方案1】：

使用DOMParser，然后使用标准的 DOM 操作。

第 1 部分

var xml = '<MainNode><NodeOne>one</NodeOne><NodeTow>tow</NodeTow><NodeThree>Three</NodeThree><NodeFour>Four</NodeFour></MainNode>',
    doc = new window.DOMParser().parseFromString(xml, 'text/xml'),
    NodeTow = doc.querySelector('NodeTow'),
    NodeThree = doc.querySelector('NodeThree');

NodeTow.parentElement.removeChild(NodeTow);
NodeThree.parentElement.removeChild(NodeThree);

document.getElementById('out').textContent = (new XMLSerializer().serializeToString(doc));

&lt;pre id="out"&gt;&lt;/pre&gt;

第 2 部分

var xml = '<MainNode><NodeOne>one</NodeOne><NodeTow>tow</NodeTow><NodeThree>Three</NodeThree><NodeFour>Four</NodeFour></MainNode>',
    doc = new window.DOMParser().parseFromString(xml, 'text/xml'),
    MainNode = doc.querySelector('MainNode'),
    NodeTow = doc.querySelector('NodeTow'),
    NodeThree = doc.querySelector('NodeThree'),
    fragment = document.createDocumentFragment(),
    children;

MainNode.removeChild(NodeTow);
MainNode.removeChild(NodeThree);

children = [].slice.call(MainNode.children);
children.forEach(function (child) {
    fragment.appendChild(child);
});

doc.removeChild(MainNode);
doc.appendChild(fragment);

document.getElementById('out').textContent = (new XMLSerializer().serializeToString(doc));

&lt;pre id="out"&gt;&lt;/pre&gt;

【讨论】：