原生JS实现点击删除textarea对应条目 适配动态添加项

你的代码存在4个核心问题导致功能异常：

• 变量作用域错误：id在遍历删除链接的循环中全局声明，最终只会保存最后一个遍历到的商品名，所有删除操作都会匹配同一个商品
• 数据未实时更新：lines数组仅在页面首次加载时分割一次textarea内容，后续动态添加的商品不会被写入这个数组，自然无法被删除
• 删除逻辑错误：遍历匹配到目标项后没有终止循环，会删除所有匹配到的条目，且splice修改数组长度后未处理索引偏移，容易出现漏删
• 匹配规则粗糙：删除链接的文本前后带多余空格，直接用原始innerHTML匹配容易出现匹配失败的情况，另外页面中两个商品链接重复使用了同一个id值，不符合HTML规范

<html>
<textarea id="cartlist">
item name 4
item name 4
</textarea>
<br />
<div class="itm"><a href="#" data-item="1" class="it">item name 4</a>
  <p>add item name 4</p>
</div>
<div class="itm"><a href="#" data-item="1" class="it">item name 3</a>
  <p>add item name 3</p>
</div>
<br><br>
remove:<a href="#" class='toBeRemoved' onclick="removeOnlyThis(this)"> item name 4</a>
remove:<a href="#" class='toBeRemoved' onclick="removeOnlyThis(this)"> item name 3</a>
<br><br>
<a href="#" class="remove" onclick="eraseText();">remove all</a>
</html>
<style>
  #cartlist {
    width: 100%;
    height: 100px;
  }

  p {
    position: absolute;
    top: -15px;
    z-index: -1;
    text-decoration: underline;
  }

  .itm {
    position: relative;
    height: 20px;
    color: green;
  }

  .it {
    opacity: 0;
    width: 110px;
    background: pink;
    position: absolute;
  }

  body {
    background: #111;
  }
</style>
<script>
  var ta = document.querySelector("#cartlist");
  var items = document.querySelectorAll('[data-item]');

  [].forEach.call(items, function (item) {
    item.addEventListener('click', function () {
      ta.value += "\n" + item.innerHTML.trim();
    });
  });

  function eraseText() {
    ta.value = "";
  }

  function removeOnlyThis(triggerEl) {
    // 每次删除时实时读取textarea最新内容，覆盖动态添加的条目
    const lines = ta.value.split(/\n/).filter(line => line.trim().length > 0);
    // 获取当前点击对应的目标商品名，去除前后多余空格
    const targetName = triggerEl.innerHTML.trim();
    // 遍历找到第一个匹配项，删除后立即终止循环，保证每次只删1条
    for (let i = 0; i < lines.length; i++) {
      if (lines[i].trim() === targetName) {
        lines.splice(i, 1);
        break;
      }
    }
    // 将处理后的内容写回文本域
    ta.value = lines.join('\n');
  }
</script>

• 删除了原代码中全局遍历删除链接缓存商品id、全局缓存lines数组的无效逻辑，避免变量污染
• 给removeOnlyThis方法传入当前点击的DOM元素，直接获取当前要删除的商品名称，不需要提前全局缓存
• 每次触发删除操作时，实时读取textarea的最新值分割为行数组，动态添加的商品也能被识别处理
• 匹配时对文本做trim处理去除多余空格，找到第一个匹配项后立刻break终止循环，保证每次点击只删除1条对应商品，不会误删其他内容
• 将重复的id="it"改为class选择器，符合HTML id唯一的规范
• 添加商品时也对文本做trim处理，避免写入多余空格导致匹配失败

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