javascript - 当用户单击 font awesome 图标时删除按钮

Question

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

<div id="closes">
    <button class="btn btn-sm ">
        <span> email@email.com.net</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>

在此 link 中给出了迄今为止完成的工作.

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>email@email.com.net</span>
        <a href="">
            <span class="fa fa-times-circle close"></span>
        </a>
    </button>
</div>
<div class="wrapper closes">
    <button class="btn btn-sm ">
        <span>email@email.com.net</span>
        <a href="">
            <span class="fa fa-times-circle close"></span>
        </a>
    </button>
</div>