用户单击字体超赞图标时删除按钮

Question

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

该链接给出了到目前为止所做的工作。

Answer 1

您需要event.preventDefault(); 以防止出现默认行为。 由于您的关闭位于a标签内，因此它将尝试导航至该页面。 要删除包含电子邮件的button ，只需使用$(this).parents('button')因为您的按钮位于clicked元素的父级中。 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> 

Answer 2

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

之后，将onClick事件写入真棒字体图标，然后在该方法中删除按钮。

HTML：

    <div id="closes" class="wrapper">
      <button id="button" class="btn btn-sm ">
         <span>email@email.com.net</span>&nbsp;
           <a class="fa fa-times-circle close" id="icon"></a>
         </button>
    </div>

JS：

    $(document).ready(function(){
       $("#icon").click(function(){
         $("#button").remove();
       });
    });

https://jsfiddle.net/4mkwn0ad/29/

Answer 3

使用remove()将button不按div

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

Answer 4

简单起见，为电子邮件范围分配一个ID，例如

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

然后在您的myFunction内部做类似

$('#email-text').hide();

Answer 5

首先，您需要使用ID而不是功能，然后您需要更改anchor标记以使其span因为单击anchor标记然后页面刷新。

您可以使用下面的代码正常工作：

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

Answer 6

尝试这个：

 $(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>