如何为动态创建的DOM元素设置stopPropagation()方法？

你的问题核心原因是：页面初始化阶段，.new2类的动态元素还没被创建，此时调用getElementsByClassName('new2')拿到的是空集合，根本没法给后续生成的元素绑定事件，所以stopPropagation()自然不生效。

下面提供两种可行的解决办法：

方法一：创建动态元素时直接绑定事件 #

在生成新<li>元素的同时，立刻为它添加点击事件并调用stopPropagation()：

let add = document.getElementById('add');

add.addEventListener("click", function () {
    let li = document.createElement("li");
    li.classList.add('new2');
    li.innerText = "this is the new text";
    
    // 直接给新创建的元素绑定事件
    li.addEventListener("click", function (e) {
        e.stopPropagation();
    });
    
    main.appendChild(li);
})

方法二：利用事件委托（更推荐） #

借助事件冒泡的特性，把事件监听绑定到父元素main上。当点击事件冒泡到父元素时，判断触发事件的目标元素是否是.new2，如果是就阻止冒泡。这种方式不需要给每个动态元素单独绑定事件，性能更优：

let main = document.getElementById("main");

// 给父元素绑定统一的点击事件
main.addEventListener('click', function (event) {
    // 优先判断目标是否为动态元素，阻止冒泡
    if (event.target.classList.contains('new2')) {
        event.stopPropagation();
        return; // 终止后续逻辑，避免元素被删除
    }
    
    // 原有的元素删除逻辑
    let el = main.children;
    for (let e of el) {
        if (event.target == e) {
            event.target.parentNode.removeChild(event.target);
        }
    }
})

内容的提问来源于stack exchange，提问作者Nafiz Imtiaz