如何从上一篇文章中删除 hr 标签？

Question

我想从帖子中删除最后一个 hr 标签

代码的完整图像：

HTML 代码：

  @forelse (auth()->user()->experiences->sortByDesc('subject') as $experience)

                    <div class="col-md-12">

                      <main class="experience" id="post">

                        <span class="button is-danger is-small text-right is-rounded" data-toggle="modal" data-target="#ExperienceDeleteModal{{ $experience->id }}"><i class="far fa-trash-alt"></i></span>

                        <span class="button is-link is-small text-right is-rounded"   data-toggle="modal" data-target="#ExperienceEditModal{{ $experience->id }}"><i class="fas fa-pen"></i></span>

                        <h1>{{$experience->subject}}</h1>

                        <p class="subtitle is-6">{{$experience->experience_desc}}</p>

                        <hr>

                      </main>

                    </div>

                    @include('frontend.profile.experience.edit')

                    @include('frontend.profile.experience.delete')

                @empty

                    <p class="pl-3">لا يوجد خبرات في الوقت الحالي </p>

  @endforelse

我尝试了这段代码，但它删除了所有 hr 标签：

#post hr:last-child {

   display:none;

} 

Answer 1

我建议稍微改变一下 HTML 结构。在这里，我向包含元素“row”添加了一个类，然后将“col-md-12”类移动到main元素中。<div class="row experiences">&nbsp; &nbsp; @forelse (auth()->user()->experiences->sortByDesc('subject') as $experience)&nbsp; &nbsp; &nbsp; <main class="experience col-md-12">&nbsp; &nbsp; &nbsp; &nbsp; <span class="button is-danger is-small text-right is-rounded" data-toggle="modal" data-target="#ExperienceDeleteModal{{ $experience->id }}"><i class="far fa-trash-alt"></i></span>&nbsp; &nbsp; &nbsp; &nbsp; <span class="button is-link is-small text-right is-rounded"&nbsp; &nbsp;data-toggle="modal" data-target="#ExperienceEditModal{{ $experience->id }}"><i class="fas fa-pen"></i></span>&nbsp; &nbsp; &nbsp; &nbsp; <h1>{{$experience->subject}}</h1>&nbsp; &nbsp; &nbsp; &nbsp; <p class="subtitle is-6">{{$experience->experience_desc}}</p>&nbsp; &nbsp; &nbsp; &nbsp; <hr>&nbsp; &nbsp; &nbsp; </main>&nbsp; &nbsp; &nbsp; &nbsp; @include('frontend.profile.experience.edit')&nbsp; &nbsp; &nbsp; &nbsp; @include('frontend.profile.experience.delete')&nbsp; &nbsp; @empty&nbsp; &nbsp; &nbsp; &nbsp; <p class="pl-3">لا يوجد خبرات في الوقت الحالي </p>&nbsp; &nbsp; @endforelse</div>这应该会产生类似于下面代码的 HTML。CSS利用main元素的使用，main在“经验”下找到最后一个，找到hr并隐藏它。.experiences main:last-of-type hr { display: none; }<div class="row experiences">&nbsp; <main class="experience col-md-12">&nbsp; &nbsp; <span class="button is-danger is-small text-right is-rounded" data-toggle="modal" data-target="#ExperienceDeleteModal{{ $experience->id }}"><i class="far fa-trash-alt"></i></span>&nbsp; &nbsp; <span class="button is-link is-small text-right is-rounded" data-toggle="modal" data-target="#ExperienceEditModal{{ $experience->id }}"><i class="fas fa-pen"></i></span>&nbsp; &nbsp; <h1>{{$experience->subject}}</h1>&nbsp; &nbsp; <p class="subtitle is-6">{{$experience->experience_desc}}</p>&nbsp; &nbsp; <hr>&nbsp; </main>&nbsp; <main class="experience col-md-12">&nbsp; &nbsp; <span class="button is-danger is-small text-right is-rounded" data-toggle="modal" data-target="#ExperienceDeleteModal{{ $experience->id }}"><i class="far fa-trash-alt"></i></span>&nbsp; &nbsp; <span class="button is-link is-small text-right is-rounded" data-toggle="modal" data-target="#ExperienceEditModal{{ $experience->id }}"><i class="fas fa-pen"></i></span>&nbsp; &nbsp; <h1>{{$experience->subject}}</h1>&nbsp; &nbsp; <p class="subtitle is-6">{{$experience->experience_desc}}</p>&nbsp; &nbsp; <hr>&nbsp; </main>&nbsp; <main class="experience col-md-12">&nbsp; &nbsp; <span class="button is-danger is-small text-right is-rounded" data-toggle="modal" data-target="#ExperienceDeleteModal{{ $experience->id }}"><i class="far fa-trash-alt"></i></span>&nbsp; &nbsp; <span class="button is-link is-small text-right is-rounded" data-toggle="modal" data-target="#ExperienceEditModal{{ $experience->id }}"><i class="fas fa-pen"></i></span>&nbsp; &nbsp; <h1>{{$experience->subject}}</h1>&nbsp; &nbsp; <p class="subtitle is-6">{{$experience->experience_desc}}</p>&nbsp; &nbsp; <hr>&nbsp; </main></div>显然，如果您@include('frontend.profile.experience.edit')或@include('frontend.profile.experience.delete')插入一个main元素，这可能不起作用......

Answer 2

假设这<main /> 是您每次迭代的回报，您将希望每个迭代都有一个唯一id的。<main class="experience" id="experience-{{$experience->id}}">&nbsp;<h1>{{$experience->subject}}</h1>&nbsp;<p class="subtitle is-6">{{$experience->experience_desc}}</p>&nbsp;<hr></main>然后在您的 CSS 中，您需要将规则更改为.experience:last-child hr {&nbsp; &nbsp;display:none;}&nbsp;

Answer 3

如果你使用 Laravel，你可以使用$loop变量：@if (!$loop->last)&nbsp; &nbsp; <hr />@endif