Javascript 在重新创建现有图元之前删除它们

我正在开发一个D&D角色生成器。我有生成的每个统计数字的图像，这取决于他们是选择标准阵列还是风险更高的阵列。当我试图学习如何以一种体面的方式编写javascript时，我正在通过不引人注目的方式进行编码。但是，我无法让我的元素删除并重新创建。我是否在其他地方嵌入清理函数对代码没有影响。下面的代码是我在JS文件中的代码，在所有函数完成后，在我的提交按钮中没有一个onClick

学习或理解我的过程中的任何帮助都会有所帮助

<button type="button" value="click" id="characterGenerator">Generate Character</button>


function charCreation(){
    let charClass = ['Cleric','Fighter','Rogue','Wizard']
    let charRace = ['Hill Dwarf', 'Mountain Dwarf', 'High Elf','Wood Elf','Lightfoot Halfling', 'Stout Halfling','Human']
    let dd = document.getElementById("ddStatRoll");
    document.getElementById("race").innerHTML = "Race: " + charRace[randNum(charRace)];
    document.getElementById("cls").innerHTML = "Class: " + charClass[randNum(charClass)];
    if (dd.options[dd.selectedIndex].value ==="standard"){
        standardArray()
    }
    else{
        riskyArray()
    }
}

function standardArray(){
    let i = document.getElementById("startstat")
    i.insertAdjacentHTML('beforeend', '<img src="img/stats/15.png" draggable="true" ondragstart="drag(event)" id="imgdrag1">')
    i.insertAdjacentHTML('beforeend', '<img src="img/stats/14.png" draggable="true" ondragstart="drag(event)" id="imgdrag2">')
    i.insertAdjacentHTML('beforeend', '<img src="img/stats/13.png" draggable="true" ondragstart="drag(event)" id="imgdrag3">')
    i.insertAdjacentHTML('beforeend', '<img src="img/stats/12.png" draggable="true" ondragstart="drag(event)" id="imgdrag4">')
    i.insertAdjacentHTML('beforeend', '<img src="img/stats/10.png" draggable="true" ondragstart="drag(event)" id="imgdrag5">')
    i.insertAdjacentHTML('beforeend', '<img src="img/stats/8.png" draggable="true" ondragstart="drag(event)" id="imgdrag6">')

}

function cleanUp(){
    let imgCount = document.getElementsByTagName('img').length;
    if (imgCount > 0){
        for (let i =1; i <= 6; i++){
            let el = document.getElementById('imgdrag'+i);
            el.remove();
            }   
    }

}

let begin = document.getElementById("characterGenerator");
if (begin.onclick){
    cleanUp();
    charCreation();

}

---

我已经破案了。我认为我不需要创建事件侦听器。我以为我写这封信的方式是这样的。所以我陈述的下半部分是这样的

let begin = document.getElementById("characterGenerator");
if (begin.onclick){
    cleanUp();
    charCreation();
}

这是个好主意，但onclick实际上不起作用。这是解决方案，因为cleanUp和charCreation函数指向正确的id

let begin = document.getElementById("characterGenerator")
begin.addEventListener('click',cleanUp);
begin.addEventListener('click',charCreation);