Member Avatar for Stefce

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 :)

  • 2 Contributors
  • 6 Replies
  • 933 Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by Lau_1

Dani AI

Generated

Short answer: the X failed because the selector and the Bootstrap attribute were both wrong. The selector needs a class or id marker (for example .panel or #panel) — using just panel looks for an element named <panel>, not the Bootstrap panel class — and data-dismiss="panel" is not a built‑in Bootstrap dismissal target (Bootstrap’s built-in dismiss behavior is for alerts). (api.jquery.com)

A safe, reusable pattern is to handle the click with event delegation and remove the nearest panel container. This works for many rows or dynamically inserted content, and avoids brittle parentNode chaining:

$(document).on('click', '.close', function(e){
  e.preventDefault();            // avoid jumping if the close is an <a href="#">
  $(this).closest('.panel')      // find the panel wrapper
         .fadeOut(200, function(){ $(this).remove(); });
});

Use a <button type="button" class="close" aria-label="Close"> for accessibility (instead of an <a href="#">), and prefer .closest() and delegated .on() so the handler works even for rows added later. (api.jquery.com)

’s quick fix (giving the panel an id and removing it) is fine and is what fixed the page for , but it’s less flexible when you have many panels or generated rows. If the intent was only a Bootstrap-style dismissible message, consider using the alert component (it understands data-dismiss="alert" and the alert plugin removes the element automatically). If it still does not work, confirm jQuery is actually loaded and your script runs after the DOM (or inside a ready handler), and avoid duplicate ids or unprevented href="#" clicks. (getbootstrap.com)

Recommended Answers

All 6 Replies

Member Avatar for Lau_1

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. :)

Edited by Lau_1
Member Avatar for Stefce

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

Member Avatar for Lau_1

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

Member Avatar for Lau_1

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.

Member Avatar for Stefce

Thank you very much the code works :)

Member Avatar for Lau_1

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.