Remove html element dupa id in javascript

[andras]

Salut,
Am un <div id="diagrama"> cu display: none; iar in momentul cind (cu un buton) il fac display: block; se adauga un element cu id= "boardnou":

Cod: Selectaţi tot

html2canvas( document.getElementById('boardnou'), {
   onrendered: function(canvas) {
       document.getElementById('diagrama').appendChild(canvas);
    }
});

Cum fac ca in momentul cind il fac display: none; (cu alt buton) sa fac remove la acel element cu id="boardnou" din div id="diagrama"? De fapt sint mai multe elemente de eliminat, dar toate bazate pe id. Am incercat cu:

Cod: Selectaţi tot

document.getElementById('diagrama').removeChild(document.getElementById('boardnou'));

dar nu functioneaza.

Salut
Cel mai simplu e cu outerHTML , asa:

Cod: Selectaţi tot

document.getElementById('boardnou').outerHTML ='';

Cred ca m-am complicat putin. Elementul id="boardnou" exista si in pagina, eu as vrea sa pun in <div id="diagrama"> un fel de clona (sau copie) a acestui element (sau sa-i schimb id-ul cind il pun in div) pe care apoi sa o inlatur dupa display: none; Se poate acest lucru? Practic vreau ca in <div id="diagrama"> sa pun 2 diagrame din pagina care au deja id-urile de care vorbesc, una cu pozitie setata (id="board") si una cu pozitie rezolvata (id="boardnou"). Daca nu e posibil voi aborda altfel.

Edit:
Ca sa nu ma complic prea mult cred ca mai bine ar fi ca dupa display: none; sa pun in JS location.reload() si in acest fel s-ar rezolva mai simplu. Mi-as permite sa fac asta pentru ca ar fi dupa salvarea pozitiei in baza de date.

Daca vrei sa-i schimbi id-ul dupa ce il pui in Div, poti face asa:

Cod: Selectaţi tot

document.getElementById('diagrama').appendChild(canvas);  //pune #boardnou in #diagrama
document.querySelector('#diagrama #boardnou').id ='new_id';  //schimba id