how to delete an element that created in memory by using javascript

Question

here is my situation

I don't want to insert the vdom to the body DOM like bellow codes showing, by the way.

  // vdom 
  const alink = document.createElement('a');
  document.body.appendChild(alink);
  alink.click();
  document.body.removeChild(alink);


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 ???
  // vdom.remove();
  // vdom.parentElement.removeChild(vdom);
}

I had tried some methods, but still not working.

refs

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

@ritaj I just want to manually recycle the garbage after using the vdom once — xgqfrms
– xgqfrms, Commented Mar 6, 2020 at 16:22
vdom is just a variable, you can't remove it. You can let JS garbage collection take care of the created node by assigning anything else to vdom variable. — Roberto Zvjerković
– Roberto Zvjerković, Commented Mar 6, 2020 at 16:26

xgqfrms · Accepted Answer · 2020-03-06 16:38:24Z

solution

I finger out that vdom just is in the JS environment, not in the real DOM context, so it's very easy to remove the vdom.

const log = console.log;

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);
  log(`vdom`, vdom);
  setTimeout(() => {
    delete this.vdom;
    log(`deleted vdom`, vdom);
  }, 3000);
}

Collectives™ on Stack Overflow

how to delete an element that created in memory by using javascript

I had tried some methods, but still not working.

refs

1 Answer 1

solution

as the screenshot shows

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

I had tried some methods, but still not working.

refs

1 Answer 1

solution

as the screenshot shows

Comments

Your Answer

Sign up or log in

Post as a guest

Related