[英]Remove the button when user clicks font awesome icon
This may seem a very stupid question but I cant get my head around it. 这似乎是一个非常愚蠢的问题,但我无法解决。 I want this button with email in it to be removed when user clicks font awesome(x) icon.
我希望当用户单击awesome(x)字体图标时删除带有电子邮件的按钮。 Basically, I want the emails added to be removed.
基本上,我希望删除添加的电子邮件。
<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>
I know almost nothing about jquery, but from search this is the best I could gather. 我对jquery几乎一无所知,但是通过搜索,这是我能搜集到的最好的信息。
<script>
function myFunction() {
$(this).closest('span').closest('button').closest('div').remove();
}
</script>
work done till now is given in this link . 该链接给出了到目前为止所做的工作。
You need event.preventDefault();
您需要
event.preventDefault();
to prevent from default behavior. 以防止出现默认行为。 Since your close is inside the
a
tag, it will try to navigate to that page. 由于您的关闭位于
a
标签内,因此它将尝试导航至该页面。 And to remove button
which contain email simply you can use $(this).parents('button')
because your button is in parent of the clicked element. 要删除包含电子邮件的
button
,只需使用$(this).parents('button')
因为您的按钮位于clicked元素的父级中。 parents()
get the ancestors of each element in the current set of matched elements, optionally filtered by a selector. 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>
I will suggest to set Ids for all the HTML elements you want to perform some action using javascript/jquery. 我建议为要使用javascript / jquery执行某些操作的所有HTML元素设置ID。 That helps to get the correct element.
这有助于获得正确的元素。
After that write the onClick event on the font awesome icon and remove the button in that method. 之后,将onClick事件写入真棒字体图标,然后在该方法中删除按钮。
HTML: HTML:
<div id="closes" class="wrapper">
<button id="button" class="btn btn-sm ">
<span>email@email.com.net</span>
<a class="fa fa-times-circle close" id="icon"></a>
</button>
</div>
JS: JS:
$(document).ready(function(){
$("#icon").click(function(){
$("#button").remove();
});
});
https://jsfiddle.net/4mkwn0ad/29/ https://jsfiddle.net/4mkwn0ad/29/
Use remove()
to button
not div
使用
remove()
将button
不按div
function myFunction() {
$(this).closest('span').closest('button').remove();
}
Make it simple, assign an id to the email span like 简单起见,为电子邮件范围分配一个ID,例如
<span id="email-text">email@email.com.net</span>
then inside your myFunction
do something like 然后在您的
myFunction
内部做类似
$('#email-text').hide();
First you need to use ID
instead of function then you need to change anchor
tag to span
because when click on anchor
tag then page refresh. 首先,您需要使用
ID
而不是功能,然后您需要更改anchor
标记以使其span
因为单击anchor
标记然后页面刷新。
You can use like below code its working fine:- 您可以使用下面的代码正常工作:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="closes"> <button class="btn btn-sm "> <span>email@email.com.net</span> <span href="" id="anchorTag"> <span class="fa fa-times-circle close">X</span> </span> </button> </div> <script> $(document).ready(function(){ $('#anchorTag').click(function(){ $(this).closest('span').closest('button').closest('div').remove(); }) }); </script>
Try This: 尝试这个:
$(document).ready(function(){ $('.btn-sm a').click(function(){ $(this).closest('button').remove(); }) })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div id="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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.