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

试试这段代码：

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

注意：从上面的答案中使用.data("id")代替.attr("id")。

Answer 2

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

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

你需要这个：

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

Answer 4

您可以使用data-id在jQuery选择器中使用[data-id=""]来过滤元素。
要删除包含元素的div，您可以使用.closest('div')。

所以，最后：

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

Fiddle

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

4 个答案: