Remove next element using jQuery

Question

I have the below HTML

<div name="taskNotificationsDiv">
    <div class="notificationCard">
        <span class="taskNotificationClose">x</span>
        Test
    </div>
    <hr>
    <div class="notificationCard">
        <span class="taskNotificationClose">x</span>
        Test
    </div>
    <hr>
    <div class="notificationCard">
        <span class="taskNotificationClose">x</span>
        Test
    </div>
    <hr>
</div>

And I have the below script which when x is clicked removes the container from the parent.

  $(".taskNotificationClose").click(function (){    
        
        this.parentNode.parentNode
        .removeChild(this.parentNode);       
       
        return false;
       });

What I am looking for is also removing the hr which is below the div container..Can someone please have a look and let me know how it can be done.

Here's the fiddle [Fiddle][1]

I tried with the below code to find nearest hr and remove it from the parent but it's throwing an error

 var $hr = $(this).next('hr');
 this.parentNode.parentNode.removeChild($hr);

Thanks [1]: https://jsfiddle.net/so3k2hpq/

Answer 1

You can use .next() function. A better approach to solve the problem with JQuery:

$(".taskNotificationClose").click(function (){    
     $(this).parent().next("hr").remove();
     $(this).parent().remove(); 
     return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div name="taskNotificationsDiv">
    <div class="notificationCard" style="color:red;">
        <span class="taskNotificationClose">x</span>
        Test
    </div>
    <hr>
    <div class="notificationCard" style="color:blue;">
        <span class="taskNotificationClose">x</span>
        Test
    </div>
    <hr>
    <div class="notificationCard" style="color:green;">
        <span class="taskNotificationClose">x</span>
        Test
    </div>
    <hr>
</div>