数组交互场景下e1.parentElement.remove()返回undefined 无法移除按钮组

1. e1.parentElement.remove()返回undefined的原因 #

DOM标准中Element.remove()方法本身没有设计返回值，执行后默认返回undefined属于正常行为，不是代码运行出错。你代码中alert(e1.parentElement.remove())弹出undefined是符合规范的正常现象。
另外你在alert中已经调用过一次remove()，后续再次执行e1.parentElement.remove()时，e1已经脱离DOM树，parentElement属性为null，会直接抛出调用异常。

2. 无法删除整组按钮的原因 #

你当前生成选项按钮的逻辑是将每个按钮、<br/>标签直接作为#chatbox的直接子元素插入，没有给同一轮生成的整组按钮套独立的父容器。此时每个按钮的parentElement就是整个聊天容器#chatbox，直接删除父元素会清空整个聊天框，完全不符合需求，也无法定位到同组的其他按钮。

最简洁的实现方式是给同一轮生成的所有选项按钮套一个独立的父容器，删除时直接移除该父容器即可清空整组按钮。

具体修改点 #

1. 修改选项生成逻辑，新增组容器 #

修改AllResponses函数中生成用户选项的代码，为同组按钮套上统一父容器：

// user option 
var option = UserOptions[x];
// 新增同组选项的父容器
const optionGroup = $('<div class="option-group"></div>');
for (var uy = 0; uy < option.length; uy++) {
    let userHtml = '<button type="button" class="btn btn-small btn-primary" onclick="AllResponses(this,\'' + option[uy] + '\')">' + option[uy] + '</button><br/>';
    optionGroup.append(userHtml);
}
// 将整组选项插入聊天框
$("#chatbox").append(optionGroup);

2. 修改删除逻辑 #

修改PrintUserResponse函数，删除重复的remove调用和无用的alert：

function PrintUserResponse(e1, userPicked) {
    if (e1) {
        // 直接删除按钮所在的整组选项容器
        e1.parentElement.remove();

        // 插入用户选中的内容
        let userHtml = '<p class="userText"><span>' + userPicked + '</span></p>';
        $("#chatbox").append(userHtml);

        document.getElementById("chat-bar-bottom").scrollIntoView(true);
    }
}

修改后点击任意选项按钮，就会自动删除当前整组的所有选项按钮，符合业务需求。

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