xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

how to delete the virtual dom that created in memory using js

const virtualDomConvert = (filename = ``) => {
  const svg = document.querySelector(`[id="live_map_svg"]`);
  const clone = svg.cloneNode(true);
  clone.id = 'vdom_svg';
  // autoRemoveAttributes(clone);
  const html = clone.outerHTML;
  // add xml namespace, support browser open preview
  const xml = `
    <?xml version="1.0" encoding="UTF-8"?>
    ${html}
  `.trim();
  const alink = document.createElement('a');
  alink.setAttribute('href', 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(xml));
  alink.setAttribute('download', filename);
  alink.style.display = 'none';
  const vdom = document.createElement(`div`);
  vdom.appendChild(alink);
  alink.click();
  vdom.removeChild(alink);
  // ??? how to delete vdom ???
  // document.body.appendChild(alink);
  // alink.click();
  // document.body.removeChild(alink);
}

solution

object delete

vdom = document.createElement(`div`);
// <div>​</div>​

vdom.remove();
// undefined

vdom;
// <div>​</div>​

window.vdom;
// <div>​</div>​

this.vdom;
// <div>​</div>​
delete this.vdom;
// true
vdom;
// VM98286:1 Uncaught ReferenceError: vdom is not defined at <anonymous>:1:1

vdom = document.createElement(`div`);
// <div>​</div>​

vdom.setAttribute("id", "uuid_div");
//undefined
document.getElementById("uuid_div");
//null
document.getElementById("uuid_div").remove();
//VM105598:1 Uncaught TypeError: Cannot read property 'remove' of null
    at <anonymous>:1:36

demo

---

not work

https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild

// remove child
node.removeChild(child);
// OR
const oldChild = node.removeChild(child);

https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove

// remove self
node.remove();

Web Component

https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement#Web_component_example

https://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElement

https://www.w3.org/TR/custom-elements/

https://github.com/w3c/webcomponents/

refs

https://www.digitalocean.com/community/tutorials/how-to-make-changes-to-the-dom

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---