CRUD系统增删数据异常：删除列后新增功能失效技术求助

看起来你遇到的问题核心是DOM元素标识冲突和删除/新增逻辑缺少精准上下文导致的。我帮你梳理了代码里的问题点，并且给出完整的修复方案：

问题诊断 #

1. 重复的ID属性：多个删除按钮和行元素用了相同的id="deleteProperty"、id="propertyNew"，HTML中ID必须唯一，这会导致JavaScript无法正确定位目标元素。
2. 删除函数无上下文：原minus()函数没有接收点击元素的参数，无法精准定位要删除的行，可能误删或导致后续新增逻辑混乱。
3. 新增函数逻辑缺失：原代码没提供duplicate()的实现，大概率是克隆了固定元素但没处理动态元素的状态重置和事件绑定。

修复后的完整代码 #

HTML部分（修正结构与标识） #

<div id="clone-container">
    <div class="propertyNew row">
        <div id="props">
            <div class="col-md-5">
                <label>Properties</label>
            </div>
            <div class="col-md-7">
                <div class="col-md-5">
                    <label>Current Price</label>
                </div>
                <div class="col-md-5">
                    <label>Price With Offer</label>
                </div>
                <div class="col-md-2">
                    <br>
                </div>
            </div>
        </div>
    </div>

    <!-- 动态生成的行容器 -->
    <div id="dynamic-property-rows">
        @if (!empty($offer->offerPropertiesPricing) && is_array($offer->offerPropertiesPricing))
            @foreach ($offer->offerPropertiesPricing as $pricedPropertyId => $pricedProperty)
                <div class="property-row row">
                    <div class="col-md-5">
                        <div class="form-group">
                            <select class="form-control pComparrision" name="propertyListAssoc[]">
                                @foreach($properties as $propertyListAssoc)
                                    <option value="{{ $propertyListAssoc->id }}" {{ $propertyListAssoc->id == $pricedPropertyId ? 'selected="selected"' : '' }}>
                                        {{ $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="{{ $pricedProperty->current_price or '0.00'}}">
                            </div>
                        </div>
                        <div class="col-md-5">
                            <div class="form-group">
                                <input class="form-control price2" name="priceWithOffer[]" value="{{ $pricedProperty->price_with_offer or '0.00'}}">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <a class="minus" onclick="minus(this)">
                                <i class="fa fa-minus fa-1x"></i>
                            </a>
                        </div>
                    </div>
                </div>
            @endforeach
        @endif

        <!-- 初始空行（作为克隆模板） -->
        <div class="property-row row">
            <div class="col-md-5">
                <div class="form-group">
                    <select class="form-control 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">
                    <br>
                    <a class="minus" onclick="minus(this)">
                        <i class="fa fa-minus fa-1x"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <a id="addExtraPropery" onclick="duplicate()">
        <i class="fa fa-plus fa-1x"></i>
    </a>&nbsp;&nbsp;
</div>
<!-- end of x_panel -->

JavaScript部分（实现精准的新增/删除逻辑） #

function minus(el) {
    // 获取当前按钮所在的行元素
    const row = el.closest('.property-row');
    // 获取所有行的数量，确保至少保留一行（可根据需求调整）
    const totalRows = document.querySelectorAll('.property-row').length;
    
    if (totalRows > 1) {
        row.remove();
    } else {
        // 如果只剩最后一行，清空内容而不是删除
        row.querySelector('select').selectedIndex = 0;
        row.querySelectorAll('input').forEach(input => input.value = '0.00');
    }
}

function duplicate() {
    // 获取最后一行作为克隆模板
    const lastRow = document.querySelector('#dynamic-property-rows .property-row:last-child');
    // 克隆行（true表示克隆子元素和事件）
    const newRow = lastRow.cloneNode(true);
    
    // 重置新行的表单内容
    newRow.querySelector('select').selectedIndex = 0;
    newRow.querySelectorAll('input').forEach(input => input.value = '0.00');
    
    // 将新行添加到容器末尾
    document.getElementById('dynamic-property-rows').appendChild(newRow);
}

关键修改说明 #

1. 统一行标识：用class="property-row"替代重复的ID，让JavaScript能精准选择所有动态行。
2. 删除函数传参：minus(this)将点击的按钮元素传入函数，通过closest('.property-row')定位到要删除的行，避免误操作。
3. 新增逻辑优化：克隆最后一行并重置表单状态，确保新增的行是干净的空行，同时保留事件绑定。
4. 容器分离：新增#dynamic-property-rows容器统一管理所有动态行，让DOM结构更清晰，方便后续维护。

这样修改后，无论删除多少行，新增功能都能正常工作，而且不会出现DOM标识冲突的问题。

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