嘿，我来帮你搞定这个小bug～ 从你的描述来看，问题大概率出在删除逻辑没有把“Bye, {name}”和对应人员的其他元素绑定在一起，导致点击remove时只删了部分元素，漏掉了这个短语。下面给你具体的解决思路和代码示例：

核心问题分析 #

你应该是给每个新增人员单独创建了输入框、短语（Hello/Bye）和remove按钮，但删除时可能只针对输入框或者部分元素做了移除操作，没有把“Bye, {name}”纳入删除范围。最稳妥的做法是把每个人员的所有相关元素都包裹在一个独立的容器里，删除时直接移除整个容器，这样就能一次性删掉所有关联内容。

具体解决方案 #

1. 调整HTML结构（每个人员用独立容器包裹） #

当你点击“add person”新增人员时，要把该人员的输入框、Hello短语、Bye短语、remove按钮都放在同一个容器内，比如一个带类名的<div>：

<!-- 新增的人员模块结构示例 -->
<div class="person-container">
  <input type="text" class="name-input" placeholder="输入姓名">
  <p class="hello-phrase">Hello, <span></span></p>
  <p class="bye-phrase">Bye, <span></span></p>
  <button class="remove-btn">Remove</button>
</div>

2. 修改Remove按钮的点击事件逻辑 #

不管是给每个新增按钮单独绑定事件，还是用事件委托（更适合动态添加的元素），都要找到当前按钮所在的人员容器，然后移除整个容器：

方式1：给新增的Remove按钮单独绑定事件（在add person的逻辑里）

function addPerson() {
  // 创建人员容器及内部元素
  const container = document.createElement('div');
  container.className = 'person-container';
  
  // 输入框、短语、按钮的创建逻辑...
  
  // 给remove按钮绑定点击事件
  const removeBtn = container.querySelector('.remove-btn');
  removeBtn.addEventListener('click', function() {
    // 找到当前按钮所在的人员容器并移除
    this.closest('.person-container').remove();
  });
  
  // 把容器添加到页面中
  document.querySelector('#people-wrapper').appendChild(container);
}

方式2：用事件委托（推荐，避免重复绑定事件）

如果是动态添加大量人员，事件委托更高效，只需要给父容器绑定一次事件即可：

// 给所有人员的父容器绑定点击事件
document.querySelector('#people-wrapper').addEventListener('click', function(e) {
  // 判断点击的是remove按钮
  if (e.target.classList.contains('remove-btn')) {
    // 找到对应的人员容器并移除
    const targetContainer = e.target.closest('.person-container');
    if (targetContainer) {
      targetContainer.remove();
    }
  }
});

3. 验证自动填充逻辑 #

确保你的自动填充逻辑也是基于人员容器来查找对应的短语元素，比如输入框输入时，找到当前输入框所在容器里的Hello和Bye短语：

// 输入框的input事件示例（可以用事件委托）
document.querySelector('#people-wrapper').addEventListener('input', function(e) {
  if (e.target.classList.contains('name-input')) {
    const name = e.target.value;
    const container = e.target.closest('.person-container');
    // 更新当前容器内的Hello短语
    container.querySelector('.hello-phrase span').textContent = name;
    // 更新当前容器内的Bye短语
    container.querySelector('.bye-phrase span').textContent = name;
  }
});

这样一来，不管是新增人员的自动填充，还是删除整个人员模块，都能完美覆盖所有元素，再也不会出现删不掉“Bye, {name}”的情况啦～

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