finding closest following sibling in jQuery

February 1, 2022

I have the following code in 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>

every time that I click on a delete button I want to delete the closest "a" tag with the paragraph inside it as well as the delete button by itself. I was able to delete the button but can’t target the closest a tag to that clicked button
I wrote it in jQuery

>Solution :

Assuming you want to remove the next a.list sibling, use .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’s .add() is used here to collect both the <button> and <a> so you can fade them out together.