Remove the button when user clicks font awesome icon

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

You need event.preventDefault(); to prevent from default behavior. Since your close is inside the a tag, it will try to navigate to that page. And to remove button which contain email simply you can use $(this).parents('button') because your button is in parent of the clicked element. parents() get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.

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

I will suggest to set Ids for all the HTML elements you want to perform some action using javascript/jquery. 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.

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

Make it simple, assign an id to the email span like

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

then inside your myFunction do something like

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

Answer 5

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.

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> 

Answer 6

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>