Question

您好我正在创建一个crud系统..添加工作完美但我在删除行时遇到问题。我已经添加了一个复选框和按下删除按钮的想法，单击框的父行消失..当前第一个li已删除但不是特定的已检查行。 Html id使用刀片显示为循环。

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

addProperyButton.addEventListener('click', () => {
    let ul = document.getElementsByClassName('addProperyInputul')[0];
    let div = document.createElement('div');
    li = addProperyInput.cloneNode(true);
    ul.appendChild(li);
});

removeProperyButton.addEventListener('click', () => {
    let ul = document.getElementsByTagName('ul')[0];
    let li = document.querySelectorAll('.propertyCheck:checked');
    li = addProperyInput.remove();
});

    <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>
</div>
 <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;

Answer 1

querySelectorAll返回一个集合，然后你需要循环遍历集合遍历到父级＆＃34; row＆＃34;元素，然后删除它。

removeProperyButton.addEventListener('click', () => {
    let ul = document.getElementsByTagName('ul')[0];
    let listOfMatchingElements =  document.querySelectorAll('.propertyCheck:checked');
    for(let i = 0; i < listOfMatchingElements.length; i++) {
      let element = listOfMatchingElements[i];
      let row = /* todo traverse up to parent "row" element */
      row.remove();
    }   
});

Answer 2

对已使用的jquery和复选框进行排序。

Set<Product> productPriceList = new HashSet<>(productPriceList);

使用javscript删除带有选中复选框的行

2 个答案: