点击带data-action的span重复添加textarea的问题修复求助

原代码问题点 #

1. 点击同一带data-action的span时，会重复创建并追加textarea，未检查元素是否已存在
2. 取消选中带data-action的span时，没有移除对应的textarea
3. 原逻辑会移除其他span的active状态，无法支持多元素同时选中的需求

修复后的完整代码 #

<style>
.active {
  border: 1px solid;
}
.append {
  margin-left: 10px;
}
</style>
<div class="customize">
  <span onclick="select(this);">text 1</span>
  <span onclick="select(this);" data-action="new-field-1">text 2</span>
  <span onclick="select(this);" data-action="new-field-2">other</span>
</div>

<script>
function select(currObj) {
  const dataAction = currObj.dataset.action;
  const isActive = currObj.classList.toggle('active');

  // 点击无data-action的span：清空所有textarea，取消所有选中状态
  if (!dataAction) {
    document.querySelectorAll('.append').forEach(el => el.remove());
    document.querySelectorAll('span.active').forEach(span => span.classList.remove('active'));
    return;
  }

  // 处理带data-action的span
  const targetTextarea = document.getElementById(dataAction);
  if (isActive) {
    // 激活状态：仅当textarea不存在时才创建
    if (!targetTextarea) {
      const textarea = document.createElement('textarea');
      textarea.classList.add('append');
      textarea.id = dataAction;
      textarea.name = dataAction;
      textarea.rows = 3;
      textarea.cols = 5;
      document.querySelector('.customize').appendChild(textarea);
    }
  } else {
    // 取消激活：移除对应的textarea
    if (targetTextarea) {
      targetTextarea.remove();
    }
  }
}
</script>

关键修改说明 #

• 支持多元素选中：移除了原代码中移除其他spanactive状态的逻辑，现在可以同时选中多个带data-action的span，每个对应独立的textarea
• 避免重复添加：创建textarea前先通过id检查元素是否存在，仅在不存在时才创建
• 精准移除元素：取消选中span时，通过data-action对应的id找到目标textarea并移除，不会误删其他元素
• 统一清空逻辑：点击无data-action的span时，会清空所有textarea并取消所有选中状态，符合交互预期

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