Javascript 使用filter（）从DOM中删除元素时遇到问题

在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

@foreach（$tags作为$tag）
{{$tag->tag_name}
@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处理
var base_url='1〕http://localhost:8000';
var tagID=$（this）.data（“id”）；
$（'.removeTag'）。单击（函数（）{
$.ajax({
url:base_url+“/people/removeTag”，
数据：{
用户ID:，
tagID:tagID
},
类型：“POST”，
数据类型：“文本”，
成功：函数（）{
$（“.removeTag”）.filter（按数据ID与标记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

？我觉得只要找到那个按钮并删除它的父元素就很容易了。

您需要这个：

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

请尝试以下代码：

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

---

注意：这使用

.data（“id”）

而不是上面答案中的

.attr（“id”）

。

如果我正确理解了您的问题，这应该可以解决问题：

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

//AJAX处理
var base_url='1〕http://localhost:8000';
var tagID=$（this）.data（“id”）；
$（'.removeTag'）。单击（函数（）{
var按钮=$（此按钮）；
$.ajax({
url:base_url+“/people/removeTag”，
数据：{
用户ID:，
tagID:tagID
},
类型：“POST”，
数据类型：“文本”，
成功：函数（）{
//如果只想删除按钮：
按钮。移除（）；
//如果要删除整个div，请执行以下操作：
父项（'.deleteSkill'）.remove（）；
}
});
});

• 您可以使用jQuery选择器中的

  [data id=”“]

  按元素的

  数据id

  过滤元素
• 要删除包含元素的

  div

  ，您可以使用

  .closest（'div'）

因此，最后：

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

---

.

嗯。。。它删除了我所有的.removeTag类，而不仅仅是带有数据id的类@AustinSlominski显示形成的html并询问您想要什么clearlyso基本上，您想要删除您刚才单击的元素的父div？基本上。我的第一步是删除按钮，但最终，我需要删除父div.BINGO！知道了！感谢you@AustinSlominski你看到我提供的小提琴了吗？它实际上删除了所需的

div

s。您使用什么版本的jQuery？