JQuery Empty Function

Question

I am attempting to completely empty a div, I have it populated on load with PHP and a foreach loop, its printing programs from a database, here's what the source looks like when the page is first loaded

<div class="frame" id="program_list">                                       
<div class="box">
    <div class="box-holder">
        <div class="box-frame">
            <h3>Marathon</h3>                       <p>Run 26 miles around the city.</p>                                            <p>Trainer: John Doe</p>
                                                <span class="btn-program"><a href="#" tabindex="10"><em>BID PROGRAM</em></a></span>
                                            </div>
                                        </div>
                                    </div>


                                    <div class="box">
                                        <div class="box-holder">
                                            <div class="box-frame">
                                                <h3>Jumping Jacks</h3>
                                                <p>Do 400 Jumping Jacks in 15 minutes</p>
                                                <p>Trainer: Jane Doe</p>
                                                <span class="btn-program"><a href="#" tabindex="10"><em>BID PROGRAM</em></a></span>
                                            </div>
                                        </div>
                                    </div>

And I'm trying to empty the program_list div with a jquery empty function like this:

        function clear_programs_div()
    {
        alert("Test");
        $("program_list").empty();
    }

But it doesn't seem to get rid of the div's. Does this function only remove inner text and not elements? How come its not removing any of the elements inside? Any advice would help thanks!

Answer 1

you need to add a # before program_list

$("#program_list").empty()

Answer 2

jQuery id selector needs # before actual id. If you want to select elements by css class you add . before class name.

$("#program_list").empty()

Answer 3

Try this:

$("div#program_list").remove();

remove() will remove the div with id 'program_list' and everything contained within.

empty() will remove the content within the div but not the div element itself

see jQuery documentation here