在 jQuery 中找到最近的兄弟姐妹

Question

我在 HTML 中有以下代碼：

 $(".remove-post").click((event) => { $(event.target).fadeOut(); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="side-bar"> <button class="remove-post"> delete </button> <a class="list"> <p>post title</p> </a> <button class="remove-post"> delete <button> <a class="list"><p>another post title</p></a> </div>

每次單擊刪除按鈕時，我都想刪除其中包含段落的最接近的“a”標簽以及刪除按鈕本身。 我能夠刪除按鈕，但無法定位與單擊按鈕最近的標簽我在 jQuery 中編寫了它

Answer 1

如果按鈕將始終停留在段落之前，您可以執行以下操作：

$(".remove-post").on("click", function () {
    $(this).next(".list").fadeOut()
    $(this).fadeOut()
})

我建議您將段落和按鈕包裝在一起，例如：

<div class="side-bar">
    <div class="wrapper">
        <button class="remove-post">Delete<button>
        <a class="list">Another post title</a>
     </div>

    <div class="wrapper">
      <button class="remove-post">Delete <button>
      <a class="list">Another post title</a>
    </div>
</div>

如果你這樣做，那么你可以使用這個：

$(".remove-post").on("click", function () {
    $(this).parent().fadeOut()
})

Answer 2

假設您要刪除下一個a.list兄弟，請使用.next()

 $(".remove-post").on("click", function() { const btn = $(this) btn.add(btn.next("a.list")).fadeOut() })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="side-bar"> <button class="remove-post">delete</button> <a class="list"><p>post title</p></a> <button class="remove-post">delete</button> <a class="list"><p>another post title</p></a> </div>

jQuery 的.add()在這里用於收集<button>和<a>以便您可以將它們一起淡出。