Vanilla JS实现点击表单回复按钮替换按钮为文本框并恢复状态

我来帮你搞定这个问题，你的代码目前有几个关键问题导致textarea不显示，还有逻辑上的小漏洞，我们一步步来修复：

首先，先修正HTML的重复ID问题 #

HTML里ID必须唯一，你现在所有表单、按钮都用了相同的ID（比如myForm、reply），这会让JS选择元素时出错。我们给每个表单里的按钮加个统一的容器，方便后续操作：

<div class="margin clb">
  <h2>comment 1</h2>
  <form method='POST' action="/" aria-live="polite">
    <!-- 给按钮加个容器，方便统一隐藏/显示 -->
    <div class="btn-group">
      <button type="submit" class="rep btn bcg bm mts mbl">reply</button>
      <button type="submit" class="rep btn bcg bm mts mbl">save</button>
      <button type="submit" class="rep btn bcg bm mts mbl">delete</button>
    </div>
    <br>
  </form>
  <h2>comment 2</h2>
  <form method='POST' action="/" aria-live="polite">
    <div class="btn-group">
      <button type="submit" class="rep btn bcg bm mts mbl">reply</button>
      <button type="submit" class="rep btn bcg bm mts mbl">save</button>
      <button type="submit" class="rep btn bcg bm mts mbl">delete</button>
    </div>
    <br>
  </form>
  <!-- 剩下的comment 3-5都按照上面的结构修改 -->
</div>

然后重写Vanilla JS逻辑 #

你的原代码错误地删除了按钮的父节点，导致textarea无处插入，而且没有处理“切换其他表单时恢复之前状态”的需求。我们重新梳理逻辑：

1. 点击任意reply按钮时，先把所有表单恢复到初始状态（显示按钮、移除已有的textarea）
2. 再隐藏当前表单的按钮组，插入新的textarea

// 选中所有reply按钮
const replyBtns = document.querySelectorAll('button.rep');

// 给每个按钮绑定点击事件
replyBtns.forEach(btn => {
  btn.addEventListener('click', function(e) {
    // 阻止表单默认提交行为
    e.preventDefault();

    // 第一步：重置所有表单的状态
    document.querySelectorAll('form').forEach(form => {
      const btnGroup = form.querySelector('.btn-group');
      const existingTextarea = form.querySelector('.reply-textarea');
      
      // 显示按钮组
      if (btnGroup) btnGroup.style.display = 'block';
      // 移除已存在的textarea
      if (existingTextarea) existingTextarea.remove();
    });

    // 第二步：处理当前点击的表单
    const currentForm = this.closest('form');
    const currentBtnGroup = currentForm.querySelector('.btn-group');
    
    // 隐藏当前表单的按钮组
    currentBtnGroup.style.display = 'none';

    // 创建新的textarea
    const replyBox = document.createElement('textarea');
    replyBox.classList.add('reply-textarea'); // 用class代替id，避免重复
    replyBox.placeholder = '输入你的回复...'; // 可选，添加提示文字
    replyBox.rows = 4; // 可选，设置默认行数

    // 把textarea插入到按钮组的位置
    currentForm.insertBefore(replyBox, currentBtnGroup);
  });
});

最后调整CSS样式 #

把原来的ID选择器改成class选择器，给textarea加一些基础样式：

.reply-textarea {
  display: block;
  width: 100%;
  padding: 8px;
  margin: 10px 0;
  min-height: 100px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

为什么你的原代码不行？ #

1. 重复ID问题：多个元素用同一个ID，document.getElementById只会找到第一个元素，后续操作全部失效。
2. 错误的节点删除：this.parentNode.parentNode.removeChild(this.parentNode)直接删除了按钮的父容器（甚至可能是表单的一部分），导致后续插入textarea时找不到父节点。
3. 未重置其他表单：点击新的reply按钮时，之前的表单状态没有恢复，不符合需求。

这样修改后，就能完美实现你要的效果：点击reply按钮时，仅当前表单的三个按钮隐藏并替换为textarea；点击其他表单的reply按钮时，之前的表单自动恢复初始状态。

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