如何用JS删除无随机ID的动态生成HTML行？

不用给每个生成的元素加随机ID也能实现删除，关键是利用事件委托和DOM层级关系来定位要删除的行。这里是修改后的完整代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="addEnv">Add</button>
<div id="envVariablesDiv"></div>

<script>
$('#addEnv').click(function() {
  // 把每一行的元素包裹在一个统一的容器里，方便后续删除
  $('#envVariablesDiv').append(`
    <div class="env-row">
      <div class="col-sm-5 top10">
        <div class="input-group">
          <label class="input-group-addon">Name</label>
          <!-- 去掉重复的id，ID必须唯一，避免DOM冲突 -->
          <input class="form-control" name="envName" type="text" placeholder="e.g. name1" />
        </div>
      </div>
      <div class="col-sm-5 top10">
        <div class="input-group">
          <label class="input-group-addon">Variable</label>
          <!-- 同样去掉重复id -->
          <input class="form-control" name="envVar" type="text" placeholder="e.g. var1" />
        </div>
      </div>
      <div class="col-sm-2 top10">
        <!-- 给删除按钮加一个专属类，方便事件委托定位 -->
        <button type="button" class="btn btn-danger delete-env-row">
          <span class="fa fa-trash"></span> Delete
        </button>
      </div>
    </div>
  `);
});

// 使用事件委托绑定删除事件：动态元素的事件要绑定到静态存在的父元素（或document）
$('#envVariablesDiv').on('click', '.delete-env-row', function() {
  // 找到当前删除按钮所在的最近的行容器，然后删除整个行
  $(this).closest('.env-row').remove();
});
</script>

关键修改点说明： #

• 包裹行容器：把每一行的三个col-sm-*元素放在一个.env-row容器里，这样删除时不用单独删三个元素，直接删除整个容器更简洁。
• 移除重复ID：原来的代码里每个输入框都用了相同的id="envName"和id="envVar"，这违反了HTML中ID必须唯一的规则，会导致DOM操作异常，所以要去掉这些重复ID。
• 事件委托：动态生成的元素无法直接绑定事件，所以我们把点击事件绑定到静态存在的#envVariablesDiv上，通过.delete-env-row类定位点击的删除按钮，再用closest()找到对应的行容器删除（绑定到就近的静态父元素比绑定到document性能更好）。

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