所有删除按钮都附加到第一行

Question

我有以下代码，它在行中显示一些数据，每个按钮都有“删除”按钮。

在我的例子中，“删除”按钮将始终删除列表中的第一行，即使我尝试删除中间的内容或结束列表中的最后一行，第一行也会被删除。

不确定为什么所有按钮在 FOR 循环中都与第一行关联。

更新#1：我做了一些测试，我可以看到每个按钮都知道它自己的行的正确数据，但是在我点击按钮后它点击了 data-target="#deleteLocation" 和这个新的“#deleteLocation”部分始终只知道第一行。

routes.py

@org_settings.route("/locations", methods=["GET"])
def locations():
    form = LocationForm()
    page = request.args.get("page", 1, type=int)
    locations = (
        Location.query.filter_by(user_id=current_user.id)
        .order_by(Location.name.asc())
        .paginate(page=page, per_page=5)
    )
    return render_template(
        "settings/locations.html",
        title="Locations",
        locations_tab="active",
        locations=locations,
        form=form,
    )

@org_settings.route("/locations/<int:location_id>/delete", methods=["GET", "POST"])
@login_required
def delete_location(location_id):
    location = Location.query.get_or_404(location_id)
    if location.organization != current_user:
        abort(403)
    db.session.delete(location)
    db.session.commit()
    flash("Your location has been deleted!", "info")
    return redirect(url_for("org_settings.locations"))

locations.html

<table class="table">
    <thead class="thead-dark">
        <tr>
            <th scope="col">Location Name</th>
            <th scope="col">Latitude</th>
            <th scope="col">Longitude</th>
            <th scope="col">Address</th>
            <th scope="col">Action</th>
        </tr>
    </thead>
    <tbody>

        {% for location in locations.items %}
        <tr>
            <td>{{ location.name }}</td>
            <td>{{ location.latitude }}</td>
            <td>{{ location.longitude }}</td>
            <td>{{ location.address }}</td>
            <td>
                <button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#deleteLocation">
                    <i class="bi bi-trash-fill" style="font-size:18px; color: rgb(255, 255, 255);"></i>
                </button>

                <!-- Bootstrap Modal -->
                <div class="modal fade" id="deleteLocation" data-backdrop="static" data-keyboard="false" tabindex="-1"
                    aria-labelledby="deleteLocationLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="deleteLocationLabel">Delete Location</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                Are you sure you would like to delete this location?
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                                <form action="{{ url_for('org_settings.delete_location', location_id=location.id) }}"
                                    method="POST">
                                    <button type="submit" class="btn btn-danger">Delete</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </td>
        </tr>

        {% endfor %}

    </tbody>
</table>

Answer 1

我通过将行 {{ location.id }} 的 ID 添加到 html 部分的 ID 来解决它 data-target="#deleteLocation-{{ location.id }}" 如下

<button type="button" class="btn btn-danger btn-sm" data-toggle="modal"
                    data-target="#deleteLocation-{{ location.id }}">
                    <i class="bi bi-trash-fill" style="font-size:18px; color: rgb(255, 255, 255);"></i>
                </button>```

<div class="modal fade" id="deleteLocation-{{ location.id }}" data-backdrop=" static" data-keyboard="false"
            tabindex="-1" aria-labelledby="deleteLocationLabel" aria-hidden="true">

所有删除按钮都附加到第一行

All Delete buttons are attached to the first row

html

css

python

jinja2

flask