Javascript 当用户单击字体图标时删除按钮

这似乎是一个很愚蠢的问题，但我无法理解。我希望当用户单击字体（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>

email@email.com.net

我对jquery几乎一无所知，但通过搜索，这是我能收集到的最好的信息

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

函数myFunction（）{
$（this）.closest（'span'）.closest（'button'）.closest（'div'）.remove（）；
}

到目前为止所做的工作在这里给出。

使用

remove（）

到

按钮

而不是

div

function myFunction() {
   $(this).closest('span').closest('button').remove();
}

使用

remove（）

function myFunction() {
   $(this).closest('span').closest('button').remove();
}

简单一点，给电子邮件指定一个id，如

<span id="email-text">email@email.com.net</span>

简单一点，给电子邮件指定一个id，如

<span id="email-text">email@email.com.net</span>

我建议为所有要使用javascript/jquery执行某些操作的HTML元素设置ID。这有助于获得正确的元素

之后，在font awesome图标上写入onClick事件，并移除该方法中的按钮

HTML:

我建议为所有要使用javascript/jquery执行某些操作的HTML元素设置ID。这有助于获得正确的元素

之后，在font awesome图标上写入onClick事件，并移除该方法中的按钮

HTML:

首先需要使用
ID
而不是函数，然后需要将
anchor
标记更改为
span
，因为当单击
anchor
标记时，页面会刷新

您可以使用下面这样的代码，它工作正常：-



email@email.com.net
X
$（文档）.ready（函数（）{
$（'#anchorTag'）。单击（函数（）{
$（this）.closest（'span'）.closest（'button'）.closest（'div'）.remove（）；
})
});
首先需要使用
ID
而不是函数，然后需要将
anchor
标记更改为
span
，因为当单击
anchor
标记时，页面会刷新

您可以使用下面这样的代码，它工作正常：-



email@email.com.net
X
$（文档）.ready（函数（）{
$（'#anchorTag'）。单击（函数（）{
$（this）.closest（'span'）.closest（'button'）.closest（'div'）.remove（）；
})
});
您需要防止默认行为。由于您的关闭位于
a
标记内，因此它将尝试导航到该页面。要删除包含电子邮件的
按钮
，您可以使用
$（this.parents（'button'）
，因为您的按钮位于单击元素的父级。获取当前匹配元素集中每个元素的祖先，可选地通过选择器进行筛选


$（'.closes'）。在（'click'，'a'，函数（e）上{
e、 预防默认值（）；
$（this.parents（'button'）.remove（）；
});
@导入url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css);
@导入url(https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
.包装纸{
位置：相对位置；
显示：内联-块；
}
.结束{
位置：绝对位置；
右边距：0；
页边距-顶部：0；
}

email@email.com.net
email@email.com.net
您需要防止默认行为。由于您的关闭位于
a
标记内，因此它将尝试导航到该页面。要删除包含电子邮件的
按钮
，您可以使用
$（this.parents（'button'）
，因为您的按钮位于单击元素的父级。获取当前匹配元素集中每个元素的祖先，可选地通过选择器进行筛选


$（'.closes'）。在（'click'，'a'，函数（e）上{
e、 预防默认值（）；
$（this.parents（'button'）.remove（）；
});
@导入url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css);
@导入url(https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
.包装纸{
位置：相对位置；
显示：内联-块；
}
.结束{
位置：绝对位置；
右边距：0；
页边距-顶部：0；
}

email@email.com.net
email@email.com.net
试试这个：


$（文档）.ready（函数（）{
$（'.btn sm a'）。单击（函数（）{
$（this）.closest（'button'）.remove（）；
})
})

email@email.com.net
试试这个：


$（文档）.ready（函数（）{
$（'.btn sm a'）。单击（函数（）{
$（this）.closest（'button'）.remove（）；
})
})

email@email.com.net
必须按下电子邮件按钮，请在此基础上展开。你的意思是我应该删除。请看我的答案。电子邮件必须是按钮。你可以在此基础上展开。你的意思是我应该删除。请看我的答案告诉我，如果你的意思基本上是用户的电子邮件。如果该用户不希望收到通知，他将删除该通知。和hide（）不起作用。告诉我你的意思基本上是用户电子邮件。如果该用户不希望收到通知，他将删除该通知。和hide（）不起作用。这个也起作用。谢谢你指出锚定标签的缺点。我是stackoverflow的新手。你能告诉我怎么做吗。没关系，点击勾号。伙计，如果我在两个不同的div中创建两个按钮，我无法关闭第二个按钮@Gambit id不能重复。@Gambit将您的
id
更新为
class
。我已经在上面的片段中完成了。检查一下。如果有效，别忘了标记为answe
    $(document).ready(function(){
       $("#icon").click(function(){
         $("#button").remove();
       });
    });