如何从上一篇文章中删除 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">

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

      <main class="experience col-md-12">

        <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>

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

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

    @empty

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

    @endforelse

</div>

这应该会产生类似于下面代码的 HTML。CSS利用main元素的使用，main在“经验”下找到最后一个，找到hr并隐藏它。

.experiences main:last-of-type hr { display: none; }

<div class="row experiences">

  <main class="experience col-md-12">

    <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>

  <main class="experience col-md-12">

    <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>

  <main class="experience col-md-12">

    <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')插入一个main元素，这可能不起作用......

Answer 2

假设这<main /> 是您每次迭代的回报，您将希望每个迭代都有一个唯一id的。

<main class="experience" id="experience-{{$experience->id}}">

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

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

 <hr>

</main>

然后在您的 CSS 中，您需要将规则更改为

.experience:last-child hr {

   display:none;

} 

Answer 3

如果你使用 Laravel，你可以使用$loop变量：

@if (!$loop->last)

    <hr />

@endif