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!

mikerobi · Accepted Answer · 2010-10-26 19:33:56Z

10

you need to add a # before program_list

$("#program_list").empty()

answered Oct 26, 2010 at 19:33

mikerobi

21k5 gold badges49 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mikerobi Over a year ago

@Pete Herbert Penito, your welcome, I would appreciate if you accept my solution.

Jakub Konecki · Accepted Answer · 2010-10-26 19:35:09Z

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

answered Oct 26, 2010 at 19:35

Jakub Konecki

46.1k8 gold badges92 silver badges128 bronze badges

Comments

Alex P · Accepted Answer · 2010-10-26 19:35:31Z

2

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

answered Oct 26, 2010 at 19:35

Alex P

12.5k7 gold badges56 silver badges74 bronze badges

1 Comment

Doug Molineux Over a year ago

thanks for the suggestion, but I wanted to keep the div, and just remove its contents :)

Nacho · Accepted Answer · 2015-06-03 08:15:36Z

0

In jQuery if you want to access an element with id you must use #.

For example: $("#program_list").empty() or $("#program_list").delete()

However if you want to access an element with class you must use .

For example: $(".program_list").empty() or $(".program_list").delete()

With $("#program_list").empty() would completely empty your div

answered Jun 3, 2015 at 8:15

Nacho

6581 gold badge13 silver badges21 bronze badges

Collectives™ on Stack Overflow

JQuery Empty Function

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related