How to remove a specific row of JScrollPane?

Question

I'm using JScrollPane what I'm trying to do is remove a specific row from the panel. Actually in the documentation I found nothing about this. A bit example:

JScrollPane Data Structure

<div id="services_added">
    <div class="services_added-row" data-id="1">
          <strong>Taglio capelli</strong>
          <br>Durata: 20 - Prezzo: 50.00 €<br>
    </div>
    <hr>
    <div class="services_added-row" data-id="2">
          <strong>Colore capelli</strong>
          <br>Durata: 50 - Prezzo: 30.00 €<br>
    </div>
    <hr>
</div>

How I can remove the data-id=2? Actually I intercept the row clicked by this:

$(document).on('click', '.services_added-row', function()
{
     var serviceId = $(this).attr('data-id');
});

Also, I want to remove the hr tag before the row too.

Answer 1

If I understand you correctly, you want to remove the div you just clicked on it. Right? If so:

$(document).on('click', '.services_added-row', function() {
 $(this).remove();
});

Update

If you want to remove the previews hr tag you can do this:

$(document).on('click', '.services_added-row', function() {
 var elem = $(this);
 elem.prev().remove();
 elem.remove();
});

(There are a lot of options to do this, but this way is the most easy to understand)