finding closest sibling in jQuery

Question

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

Answer 1

If the button will always stay before paragraph you can do:

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

I would recommend you to wrap the paragraph and the button together like:

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

If you do so, then you can use this:

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