How do I make a JQuery close a button?

Question

Hello I am trying to make a JQuery code to close my error button but I am having problems doing so, if you could help out thank you. Please take it easy on me since I am just learning the ropes for JQuery.

This is my php/html code

<?php if(isset($template->form->error)) { ?>
                <div class="flash" style="margin-top: 20px;"></div>
                <div class="alert alert-error">
                <button type="button" class="close" data-dismiss="alert">&#215;</button>
                <h4>Warning!</h4>
                <?php echo $template->form->error; ?>
            </div>
            <?php } ?>

I am trying to make it so when you click the (x) ×

the error pop-up to go away, I tried this JQuery code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".close").remove(); // The close is the class and not the id (Thank you jsexpert and Darren)
});
});
</script>

Could it be, because of my login submit? Here is my login button/ login submit

<div><input class="btn btn-primary" name="login" type="submit" value="Login"></div>

Sorry I wasn't making myself clear. http://prntscr.com/433iza the warning! is what I want to get rid of by click the x button to the right. All $(".close").remove(); did was this http://prntscr.com/433lfh

Answer 1

I assume this is your problem:

$("#close").remove();

should be:

$(".close").remove(); // The close is the class and not the id

Answer 2

It looks like you're using bootstrap? ( Correct me if I'm wrong )?

If that is the case, you want your bind to use trigger()

$(".close").trigger("click");

Also the other issue was that you're button has a class (.) and not an id (#) .

If that isn't the case, you're better off binding to the specific button: ie-

$("button.close").click(function(){
    $('#close').remove();
});

---

Also, I don't see an element with #close anywhere?

Answer 3

Your selector is wrong, as others have pointed out. But here is another way to do it.

$(function(){
    $( ".close" ).click(function( event ) {
      event.preventDefault();
      $( this ).hide();
    });
});