无法从生成的列表中抓取元素

因此，我开始了一个程序，在该程序中，我用删除按钮在无序列表中生成一个值列表，删除每行列表中的相应条目。当我试图获取适当<李>元素，它总是返回null，我真的不知道为什么。

当点击按钮时，值列表由以下功能生成：

const random = () => {
let remove = document.getElementById("generate");
remove.remove();
document.body.appendChild(list);
while (chosenNames.length < 20) {
let num = Math.floor(Math.random() * names.length)
let inputName = names[num]
if (chosenNames.indexOf(inputName) === -1) {
chosenNames.push(inputName)
};
};
const nameGen = (name) => {
let add = document.createElement("li");
let deleteButton = document.createElement("button");
deleteButton.setAttribute("class", `deleteButton`);
deleteButton.setAttribute("onclick", `deleteClick(${name})`);
deleteButton.innerText = "X";
add.setAttribute("id", name);
add.setAttribute("class", name);
list.appendChild(add);
add.innerHTML += `${name} `;
add.appendChild(deleteButton);
};
chosenNames.forEach(nameGen);
};

这将删除第一个按钮，并选择20个值放入列表中。生成后，HTML排序列表如下所示：

<ul id="nameList">
<li id="k" class="k">
k
<button class="deleteButton" onclick="deleteClick(k)">X</button>
</li>
<li id="d" class="d">
d
<button class="deleteButton" onclick="deleteClick(d)">X</button>
</li>
</ul>

冲洗并重复所有20个值。基于此，我应该能够点击按钮并运行函数deleteClick及其对应字母的参数。该函数如下：

const deleteClick = (name) => {
let getList = document.getElementById("nameList");
let element = document.getElementById(name);
console.log(element);
getList.removeChild(element);
};

我还没有完全计算出它的删除部分，所以我不确定这是否是错误的，但不管怎样，控制台中的输出总是空的。因此，不知何故，这个函数没有获取具有正确id的元素，我真的不知道为什么。点击按钮会给我错误

未捕获类型错误：未能在"Node"上执行"removeChild"：参数1的类型不是"Node"。

考虑到参数为null，这并不奇怪。

任何帮助或见解都将不胜感激：(