Question

I have a jQuery triggering a div with live updates every 5 seconds. That works fine. Sometimes those updates should be deleted immediately.

jQuery generates html like this:

<form>

<div id="live1">Aha I love you too
<input id="live1" type="hidden" value="1"><label id="livedel1">Delete 1</label>
</div>

<div id="live2">Thx man
<input id="live2" type="hidden" value="2"><label id="livedel2">Delete 2</label>
</div>

</form>

… and so on.

I need some help with HTML and jQuery how to send/separate specific id to jQuery so it can be deleted, since I’m kinda not into jQuery vals. Deletion is not a problem, just for jQuery to grab specific id.

Recommendations in HTML and jQuery are welcome and upper HTML can be changed to xy code no problem.

Answer 1

First, you have multiple elements with the same id. This is not valid HTML and will cause you problems.

If you want to delete a div when the label is clicked, you could do this:

<form>

<div id="live1" class="live">Aha I love you too
<input id="livehidden1" type="hidden" value="1"><label id="livedel1">Delete 1</label>
</div>

<div id="live2" class="live">Thx man
<input id="livehidden2" type="hidden" value="2"><label id="livedel2">Delete 2</label>
</div>

</form>

jQuery:

$('.live').on('click', 'label', function() {
    $(this).closest('.live').remove();
});

The key is to fix your IDs to be valid, and add a class live to the parent elements. Then you can use jQuery to search up the DOM and delete the parent live element. But, it is difficult from your question to tell if this is what you really want to do.

If you don’t want to change your html, aside from the invalid IDs, you would need to do something like this:

$('form').on('click', 'label', function() {
    var num = $(this).attr('id').replace(/livedel/, '');
    $('#live'+num).remove();
});

This makes the assumption that your html may vary from item to item. If your structure is always the same, you don’t have to mess with IDs and can just use .parent(), although as I am suggesting, it is not very robust:

$('form').on('click', 'label', function() {
    $(this).parent().remove();
});