Having some problems using filter() to remove an element from DOM

Question

Having some issues targeting the correct element from the DOM after an ajax call succeeds. What I have now is this in my view:

@foreach($tags as $tag)
    <div class="skillLabel deleteSkill">    
        <h4>
            <button class="btn btn-primary removeTag" data-id="{{ $tag->id }}">
                <a href="">x</a>
                <span class="label">{{ $tag->tag_name }}</span>
            </button>
        </h4>
    </div>
@endforeach

And in my jQuery:

//AJAX Handling
var base_url = 'http://localhost:8000';
var tagID = $(this).data("id");
$('.removeTag').click(function() {
    $.ajax({
        url: base_url+"/people/removeTag",

        data:{
            userID: <?php echo $user->id; ?>,
            tagID: tagID
        },

        type: "POST",

        dataType: "text", 

        success: function(  ) {
            $(".removeTag").filter(FILTER BY WHERE DATA ID MATCHES TAG ID).remove();
        }
    });
});

I want that particular tag to disappear upon success (which the ajax request is working). Also, just curious (separate issue, but may as well ask), if I have a ton of modal windows loading at the top of the page and and are triggered using buttons, would it be quicker to have those be ajax calls?

EDIT :

Here is the HTML once rendered:

<div class="skillLabel deleteSkill">    
    <h4>
        <button class="btn btn-primary removeTag" data-id="6">
            <a href="">x</a>
            <span class="label">New</span>
        </button>
    </h4>
</div>
<div class="skillLabel deleteSkill">    
    <h4>
        <button class="btn btn-primary removeTag" data-id="14">
            <a href="">x</a>
            <span class="label">Test</span>
        </button>
    </h4>
</div>

EDIT :

Better yet, is there a way I could remove the div containing the tags? I feel like it would be as easy as locating that button, and removing its parent elements.

Answer 1

Try this code:

$(".removeTag").filter(function() {
    return $(this).data("id") == tagID;
}).remove();

Note : this uses .data("id") instead of .attr("id") from the answer above.

Answer 2

This should do the trick, if i understood your problem correctly:

//AJAX Handling
var base_url = 'http://localhost:8000';
var tagID = $(this).data("id");
$('.removeTag').click(function() {
    var button = $(this);
    $.ajax({
        url: base_url+"/people/removeTag",

        data:{
            userID: <?php echo $user->id; ?>,
            tagID: tagID
        },

        type: "POST",

        dataType: "text", 

        success: function(  ) {
            //If you want to remove just the button:
            button.remove();
            //Or this if you want to delete the whole div:
            button.parents('.deleteSkill').remove();
        }
    });
});

Answer 3

You would need this:

$(".removeTag").filter(function(){
     return $(this).attr("id") == tagID;
}).remove();

Answer 4

• You can filter elements by their data-id using [data-id=""] inside jQuery selector.
• For removing div which contains element, you can use .closest('div') .

So, finally:

$('.removeTag[data-id="' + tagID + '"]').closest('div').remove();

Fiddle .