使用JavaScript移除勾选复选框对应的行

我来帮你修复这个移除功能的bug！目前你的删除逻辑有两个关键问题：一是没有正确遍历选中的复选框，二是错误地删除了原始的输入模板而非勾选对应的行。咱们一步步来修正：

问题分析 #

你的删除事件代码里，document.querySelectorAll('.propertyCheck:checked')确实获取到了所有选中的复选框，但后续直接用addProperyInput.remove()删除的是页面初始的那个输入容器，完全没关联到选中的行。另外，克隆元素时的li没有用let/const声明，会变成全局变量，这也可能引发潜在问题。

修正后的JavaScript代码 #

const addProperyButton = document.querySelector('a.addProperyButton');
const addProperyInputul = document.querySelector('.addProperyInputul');
const addProperyInput = document.querySelector('.addProperyInput');
const removeProperyButton = document.querySelector('.removeProperyButton');

addProperyButton.addEventListener('click', () => {
  // 克隆完整的li行元素，而非内部div，同时声明局部变量避免全局污染
  const li = addProperyInput.closest('li').cloneNode(true);
  addProperyInputul.appendChild(li);
});

removeProperyButton.addEventListener('click', () => {
  // 获取所有选中的复选框
  const checkedBoxes = document.querySelectorAll('.propertyCheck:checked');
  // 遍历每个选中项，定位并删除对应的行
  checkedBoxes.forEach(box => {
    // 向上查找最近的li父元素，精准定位要删除的行
    const targetLi = box.closest('li');
    if (targetLi) {
      targetLi.remove();
    }
  });
});

关键修正点说明 #

1. 克隆元素的正确方式：原来的addProperyInput.cloneNode(true)克隆的是内部div容器，现在改成addProperyInput.closest('li').cloneNode(true)，确保克隆的是完整的
2. 行结构，和初始行保持一致。
3. 删除逻辑的修复：遍历所有选中的复选框，用closest('li')快速定位到复选框所在的行，再调用remove()方法移除该行，实现精准删除。
4. 变量声明规范：给克隆的li加上const声明，避免全局变量污染，代码更严谨。

整理后的Blade HTML结构 #

<div>
  <ul class="addProperyInputul">
    <li>
      <div class="addProperyInput">
        <div class="col-md-5">
          <div class="form-group">
            <select class="form-control pComparrision" id="pComparrision" name="propertyListAssoc[]">
              <option>No Properties</option>
              @foreach($properties as $propertyListAssoc)
                <option value="{{ $propertyListAssoc->id }}">{{ $propertyListAssoc->property_name }}</option>
              @endforeach
            </select>
          </div>
        </div>
        <div class="col-md-7">
          <div class="col-md-5">
            <div class="form-group">
              <input class="form-control price1" name="currentPrice[]" value="0.00">
            </div>
          </div>
          <div class="col-md-5">
            <div class="form-group">
              <input class="form-control price2" name="priceWithOffer[]" value="0.00">
            </div>
          </div>
          <div class="col-md-2">
            <input class="propertyCheck" type="checkbox">
          </div>
        </div>
      </div>
    </li>
  </ul>

  <a class="removeProperyButton">
    <i class="fa fa-minus fa-1x"></i>
  </a>
  <a class="addProperyButton">
    <i class="fa fa-plus fa-1x"></i>
  </a>&nbsp;&nbsp;
</div>

这样修改后，点击移除按钮时，所有勾选了复选框的行都会被正确删除啦！

内容的提问来源于stack exchange，提问作者The Real Dude