CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap-3
Gambit
Gambit

Reputation: 11

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. Basically, I want the emails added to be removed.

<div id="closes">
    <button class="btn btn-sm ">
        <span> [email protected]</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.

Upvotes: 0

Views: 2943

Answers (6)

Kiran Shahi
Kiran Shahi

Reputation: 7970

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 protected]</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 protected]</span>
        <a href="">
            <span class="fa fa-times-circle close"></span>
        </a>
    </button>
</div>

Upvotes: 2

Ehsan
Ehsan

Reputation: 12959

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 protected]</span>
      <a href="#">
        <span class="fa fa-times-circle close"></span>
      </a>
  </button>
</div>

Upvotes: 0

Ashu
Ashu

Reputation: 2266

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 protected]</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/

Upvotes: 1

לבני מלכה
לבני מלכה

Reputation: 16251

Use remove() to button not div

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

Upvotes: 0

Rohit Verma
Rohit Verma

Reputation: 3785

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 protected]</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>

Upvotes: 0

Yousaf Hassan
Yousaf Hassan

Reputation: 494

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

<span id="email-text">[email protected]</span>

then inside your myFunction do something like 

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

Upvotes: 0

Related Questions