Question

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

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

work done till now is given in this link.

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

Use remove() to button not 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>

Remove the button when user clicks font awesome icon

6 个答案: