javascript - 当用户单击字体真棒图标时删除按钮

Question

这似乎是一个非常愚蠢的问题，但我无法理解它。当用户单击字体真棒（x）图标时，我希望删除这个带有电子邮件的按钮。基本上，我希望删除添加的电子邮件。

<div id="closes">
    <button class="btn btn-sm ">
        <span> [e-mail]</span>
        <a href="#" onclick="myFunction()">
            <span class="fa fa-times-circle close"></span>
        </a>
    </button>
</div>

我对 jquery 几乎一无所知，但从搜索中这是我能收集到的最好的。

<script>
    function myFunction() {
        $(this).closest('span').closest('button').closest('div').remove();
    }
</script>

到目前为止完成的工作在此链接中给出。

标签： javascriptjqueryhtmlcsstwitter-bootstrap-3

Answer 1

您需要event.preventDefault();防止默认行为。由于您的关闭位于a标签内，因此它将尝试导航到该页面。并且要删除button包含电子邮件的内容，您可以简单地使用$(this).parents('button')，因为您的按钮位于单击元素的父级中。parents()获取当前匹配元素集中每个元素的祖先，可选地由选择器过滤。

$('.closes').on('click', 'a', function(e) {
    e.preventDefault();
    $(this).parents('button').remove();

});

@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css);
@import url(https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
.wrapper {
    position: relative;
    display: inline - block;
}


.close {
    position: absolute;
    margin - right: 0;
    margin - top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper closes">
    <button class="btn btn-sm ">
        <span>[e-mail]</span>
        <a href="">
            <span class="fa fa-times-circle close"></span>
        </a>
    </button>
</div>
<div class="wrapper closes">
    <button class="btn btn-sm ">
        <span>[e-mail]</span>
        <a href="">
            <span class="fa fa-times-circle close"></span>
        </a>
    </button>
</div>