事件监听回调中删除DOM元素后无法再次新增对应元素的问题求解

你把inputTask.remove()的执行逻辑放在了click事件回调的最末尾，而不是change事件的回调函数内。这就导致每次点击按钮，input刚被添加到DOM就会被立刻移除，视觉上会觉得首次操作后没法再添加新输入框，本质上是每次添加后都马上被删除，根本没有留给用户输入的时间。

把移除input的逻辑移动到fetch请求逻辑之后，也就是change事件的回调内部即可。
修复后的完整代码如下：

const addtasks = document.getElementById('task-add-btn').addEventListener('click', (event)=>{
    const inputTask = document.createElement('input');
    inputTask.type = 'text';
    inputTask.placeholder = 'Add Task Description';
    console.log(inputTask);
    document.querySelector('.display-result-div').appendChild(inputTask);
    inputTask.addEventListener('change', (event)=>{
        fetch(`${window.origin}/add_task`, {
            method : "POST",
            credentials : 'include',
            body : JSON.stringify(event.target.value),
            cache : 'no-cache',
            headers : new Headers({
                "content-type" : 'application/json'
            })
        }).finally(() => {
            // 请求完成后再移除input，不管请求成功失败都清理节点
            inputTask.remove();
        });
    });
});

• 每次点击按钮都会正常创建input并插入到DOM中，等待用户输入
• 用户输入完成触发change事件后，先提交任务到后端接口
• 接口请求结束后再移除当前input元素
• 后续再次点击按钮会重复上述流程，不会出现无法添加输入框的问题

内容的提问来源于stack exchange，提问作者Abhishek Sharma