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

【问题标题】：Remove the button when user clicks font awesome icon当用户单击字体真棒图标时删除按钮
【发布时间】：2018-06-20 05:02:36
【问题描述】：

这似乎是一个非常愚蠢的问题，但我无法理解它。当用户单击字体真棒（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 中给出。

【问题讨论】：

邮箱必须是按钮
能否请您扩展一下。你的意思是我应该删除 .
请看我的回答

标签： javascript jquery html css twitter-bootstrap-3

【解决方案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>

【讨论】：

这个也很好用。并感谢您在此处指出锚标记的缺点。
我是 stackoverflow 的新手。你能告诉我怎么做吗？没关系，点击勾号。
伙伴，如果我在两个不同的 div 中创建两个按钮，我无法关闭第二个按钮。 jsfiddle.net/scvj2z0w/3
@Gambit id 不能重复。
@Gambit 将您的 id 更新为 class。我已经在上面的 sn-p 中完成了它。检查一次。如果它有效，请不要忘记将其标记为答案:)

【解决方案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/

【讨论】：

【解决方案3】：

简单点，为电子邮件跨度分配一个 id，例如

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

然后在你的myFunction 中做类似的事情

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

【讨论】：

【解决方案4】：

首先你需要使用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>

【讨论】：

【解决方案5】：

使用remove() 到button 而不是div

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

【讨论】：

告诉我你的意思
基本上是它的用户电子邮件。如果该用户不希望收到通知，他将删除它。并且 hide() 不起作用。

【解决方案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>

【讨论】：