Hello everyone i started learning bootstrap for a while and i want to make close button for div boxes i have this code but the X button doesn't work:

<div class="panel panel-default">
    <table class="table table-hover">
        <thead>
            <tr style="background-color: lavender;">
                <th><button type="button" class="btn btn-primary btn-xs">Share</button></th>
                <th><a href="#" class="close" data-dismiss="panel" aria-label="close" id="hide">&times;</a></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Manchester United - Manchester United</td>
                <td>2 - 1</td>
            </tr>
            <tr>
                <td>FC Barcelona - Manchester</td>
                <td>T1 2+p.p</td>
            </tr>
            <tr>
                <td>Manchester United - Manchester United</td>
                <td>2 - 1</td>
            </tr>
            <tr>
                <td>FC Barcelona - Manchester United</td>
                <td>2 - 1</td>
            </tr>
            <tr style="background-color: lightgreen;">
                <th>Bet: 2100</th>
                <th>Win: 55864</th>
            </tr>
        </tbody>
    </table>
</div>

and here is the JavaScript:

$(document).ready(function() {
    $("#hide").click(function(){
        $("panel").hide();
    });
});

thank you :)

Recommended Answers

All 6 Replies

Below code will give u some idea, try this code:

window.onload = function(){
    document.getElementById('hide').onclick = function(){
                this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
        return false;
    };
};

or

$(document).ready(function() {
    $('#hide').on('click', function(e) { 
        $('#div_to_hide').remove(); 
    });
});

I havent try the code, but hope it help. :)

With this code dissapears just the first row where the close button is

u can modify from it, it just an idea for u. Change the code with what u want to hide

Include this js file,

<script src=""></script>

Download Link: http://code.jquery.com/jquery-git.js

For this JS: In case u want to hide overall div (i dont know what u want to hide), change the

<div class="panel panel-default">

To

<div id="panel" class="panel panel-default">

And add this,

$(document).ready(function() {
    $('#hide').on('click', function(e) { 
        $('#panel').remove(); 
    });
});

Hope this help.

Thank you very much the code works :)

Mark solved if solved ya.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.