Динамически созданные обработчики событий Javascript исчезают при добавлении другого

Question

У меня есть упорядоченный список, из которого я хочу, чтобы элементы исчезали при нажатии.

У меня есть следующий код JavaScript:

<script>
    let halls = new Set();

    function rm() {
        halls.delete((this.id).substring(0,this.id.length-4));
        document.getElementById(this.id).remove();
    }
    function setEventHandler(obj, name, fn) {
        if (typeof obj == "string") {
            obj = document.getElementById(obj);
        }
        if (obj.addEventListener) {
            return(obj.addEventListener(name, fn));
        } else if (obj.attachEvent) {
            return(obj.attachEvent("on" + name, function() {return(fn.call(obj));}));
        }
    }

    function addHall() {
        let oldSize = halls.size;
        let chosen = document.getElementById("hall2").value;
        halls.add(chosen);
        if (oldSize != halls.size) {
            document.getElementById("fillHall").innerHTML += `<li id="${chosen}List" name="${chosen}" >${chosen}</li>`;
            setEventHandler(chosen + "List", "click", rm);
        }
    };

    document.getElementById("hall2").onchange = addHall;
</script>

Что-то я делаю не так? Как сохранить обработчик событий, который удалит элемент списка?

Я знаю, что мой код небрежный: / извините

Спасибо