javascript - 使用 filter() 从 DOM 中删除元素时遇到一些问题

Question

在 ajax 调用成功后，针对 DOM 中的正确元素存在一些问题。我现在所拥有的在我看来是这样的:

@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

在我的 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();
        }
    });
});

我希望该特定标签在成功后消失(ajax 请求正在工作)。另外，只是好奇(单独的问题，但不妨问一下)，如果我在页面顶部加载大量模态窗口并使用按钮触发，那么使用 ajax 调用会更快吗？

编辑:

这是渲染后的 HTML:

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

编辑:

更好的是，有没有办法删除包含标签的 div ？我觉得这就像找到该按钮并删除其父元素一样简单。

Answer 1

如果我正确理解你的问题，这应该可以解决问题:

//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();
        }
    });
});