CODEWITHSUNDEEP
javascript
Raha MK
Raha MK

Reputation: 102

How to close alert message div using javascript?

How to close alert message parent div using javascript?

Problem is parent div is closing but i need to close above parent div.

Here is my code:

$(".msg-error .btn-close").click(function(){$(this).parent().hide();});

.msg-error {
    background:#ff0000;
    color:#fff;
    padding:10px;
    margin-bottom:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="mainalert">

<div class="msg-error">
    <div class"container">
    First error message <a class="btn-close">Close</a>
    </div>
</div>

<div class="msg-error">
    <div class"container">
    Second error message <a class="btn-close">Close</a>
    </div>
</div>

</div>

Upvotes: 0

Views: 1482

Answers (5)

I Follow Mohamed
I Follow Mohamed

Reputation: 9

Remove parent div without jquery

<div class="msg-error">
    <div class"container">
    Second error message <a class="btn-close" onclick='Close()'>Close</a>
    </div>
</div>
<script>
function Close(){
document.getElementsByClassName('msg-error').innerHtml='';
}
<script>

Upvotes: 0

Iliya Reyzis
Iliya Reyzis

Reputation: 3677

you can try this way, by searching for that main parent div

you can use closest() or parents(), first option will return first match and seconds will return all matches, your choice

$(".msg-error .btn-close").click(function() {
    $(this).parents(".msg-error").hide();
});

or going the parent twice

$(".msg-error .btn-close").click(function() {
    $(this).parent().parent().hide();
});

Upvotes: 0

Guilherme Sehn
Guilherme Sehn

Reputation: 6787

You can use .closest() to specify the closest parent you want to achieve by using a selector.

$(".msg-error .btn-close").click(function() {
  $(this).closest('.msg-error').hide();
});

With this function you can even change your HTML structure without having to edit your JavaScript code to deal with multiple level of .parent() calls, provided that you continue using the same CSS class for the selector.

FIDDLE: http://jsfiddle.net/8b7zt1g7/5/

Upvotes: 2

NReilingh
NReilingh

Reputation: 1909

You can chain .parent() calls together. Try:

$(".msg-error .btn-close").click(function(){$(this).parent().parent().hide();});

Upvotes: 0

sinisake
sinisake

Reputation: 11318

$(".msg-error .btn-close").click(function(){$(this).parent().parent().hide();});

http://jsfiddle.net/8b7zt1g7/4/

Or, little fancier: 

$(".msg-error .btn-close").click(function(){$(this).closest('.msg-error').hide();});

Upvotes: 1

Related Questions