JavaScript cloneNodeで複製した要素の親に入ってる子全てのIDを消すには

Question

親div(id:aaaa)を生成します
id:aaaaにid:bbbbを入れて生成します
id:bbbbにid:ccccを入れて生成します

cloneNodeで親を複製します
childrenの数だけidを除去します

id="cccc"の親はid:bbbbなので残ってしまうと思うのですが、
id="cccc"も消すにはどうしたらいいのでしょうか？
どういう親子関係であれ親id:aaaaの以下のIDを一発除去するにはどうしたらいいでしょうか？

<script>
window.onload=function(){
var div = document.createElement('div');
div.id="aaaa";
div.style.width="100%";
div.style.height="50px";
div.style.background="black";
document.body.prepend(div);

var div = document.createElement('div');
div.id="bbbb";
div.style.width="100%";
div.style.height="50px";
div.style.background="black";
document.getElementById('aaaa').appendChild(div);

var div = document.createElement('div');
div.id="cccc";
div.style.width="100%";
div.style.height="50px";
div.style.background="black";
document.getElementById('bbbb').appendChild(div);


element = document.getElementById('aaaa');
cloneElement = element.cloneNode(true);
cloneElement.removeAttribute("id");
for (let i = 0; i < cloneElement.children.length; i++) {
cloneElement.children[i].removeAttribute("id");
}
document.body.appendChild(cloneElement);



}
</script>

Answer 1

cloneElement.children[i]に子要素があるか確認してあれば消すようなコードに変えればよいです。
また、idでなくclassにすれば特に重複の問題は出ません。

Comments

[beast_]

簡単なサンプルコードとして提示しましたが、
複雑に入り組んだ構造だった場合に、

＞cloneElement.children[i]に子要素があるか確認してあれば消すようなコードに変えればよいです。
これだと深くなっていくと思うので、このやり方以外にないものでしょうか

classの指定について調べてみます

Answer 2

下記でクローンのidのみ除去できました

<script>
window.onload=function(){
var div = document.createElement('div');
div.id="aaaa";
div.style.width="100%";
div.style.height="150px";
div.style.background="red";
document.body.prepend(div);

var div = document.createElement('div');
div.id="bbbb";
div.style.width="100%";
div.style.height="50px";
div.style.background="blue";
document.getElementById('aaaa').appendChild(div);

var div = document.createElement('div');
div.id="cccc";
div.style.width="100%";
div.style.height="50px";
div.style.background="yellow";
document.getElementById('bbbb').appendChild(div);

element = document.getElementById('aaaa');
cloneElement = element.cloneNode(true);
cloneElement.removeAttribute("id");

Array.from(cloneElement.querySelectorAll('div'), i => {
i.removeAttribute("id");
});

document.body.appendChild(cloneElement);
}
</script>

Answer 3

下記ですと複製前の要素に変更が与えられるだけで複製後に変化は与えられず
何か方法を思いつく方は引き続き教えてください

<script>
window.onload=function(){
var div = document.createElement('div');
div.id="aaaa";
div.style.width="100%";
div.style.height="150px";
div.style.background="red";
document.body.prepend(div);

var div = document.createElement('div');
div.id="bbbb";
div.style.width="100%";
div.style.height="50px";
div.style.background="blue";
document.getElementById('aaaa').appendChild(div);

var div = document.createElement('div');
div.id="cccc";
div.style.width="100%";
div.style.height="50px";
div.style.background="yellow";
document.getElementById('bbbb').appendChild(div);

element = document.getElementById('aaaa');
cloneElement = element.cloneNode(true);
cloneElement.removeAttribute("id");

Array.from(cloneElement.querySelectorAll('div'), i => {
document.getElementById(i.id).removeAttribute("id");
});

document.body.appendChild(cloneElement);
}
</script>