Remove child div when parent is selected again

Question

I am using an n level selection chain using 99 points website tutorial, but when I try to reselect parent node, the corresponding child div isn't reset.

I have searched all over StackOverflow and Google, but so far no luck.

Error is with the following code and I am unable to correct it.

    $(this).nextAll('.parent').remove();
    $(this).nextAll('label').remove();

This is my code

Main Page

    <script type="text/javascript">
        $('.parent').livequery('change', function() {

                $(this).nextAll('.parent').remove();
            $(this).nextAll('label').remove();

                $.post("/dashboard/details/show_levels/", {
                    parent_id: $(this).val(),
                }, function(response){
                    setTimeout("finishAjax('levels', '"+escape(response)+"')", 400);
                });

                return false;
            });
        })

        function finishAjax(id, response){
        //alert(unescape(response));

          $('#'+id).append(unescape(response));
        } 
    </script>

    <div id=levels>
        <select id="level" class="parent" multiple="multiple" scroabble="1" name="data[level][]">
<option value="Building & Construction Mat">Building & Construction Mat</option>
<option value="Electronic Components">Electronic Components</option>
<option value="Furniture & Mattresses">Furniture & Mattresses</option>
<option value="Labels">Labels</option>
</select>
    </div>

show_levels

    <select id="sublevel" class="parent" multiple="multiple" scroabble="1" name="data[sublevel][]">
<option value="Labels">Labels</option>
<option value="Preparation Techniques">Preparation Techniques</option>
<option value="Process Parameters">Process Parameters</option>
</select>

Update

Following code solved my problem

$("#levels").on('click', '.parent', function () {
    $(this).parents().nextUntil().remove();
});

Please post _your_ code here so we can debug without having to go to an external site. — Michael Berkowski, Oct 16 '12 at 12:27
live source html would help, not your php form helper code. Hierarchy structure is important to see due to traverse you are using — charlietfl, Oct 16 '12 at 12:36
you're using the `.livequery()` provided with the demo which i think it's outdated cause it use jquery 1.3.2. you should use `.on()` (of course this will not solve your problem) — , Oct 16 '12 at 12:39
@CrisimIlNumenoreano I am using livequery with jquery 1.8.2 as there are other functions on application which are dependent on it and not comatible with jquery 1.3 So what do you suggest? — Deadlock, Oct 16 '12 at 12:42
OK.. your `select` tag has no siblings so `next()`won't return anything. Maybe you want `$('.parent').not(this).remove()` ?? Can't tell much from one element. A demo in jsfiddle.net would help — charlietfl, Oct 16 '12 at 12:51
@charlietfl No that also doesn't work, provided tutorial used exactly same binding (using class name), I want to maintain the hierarchy of the populated chained list. Thanks for suggestion... — Deadlock, Oct 16 '12 at 12:54
please create demo with enough html to replicate. Another tutorial is not a good source for the problem in your code. Replace `livequery` with `on` so won't need to include an old plugin file that is no longer needed in jQuery — charlietfl, Oct 16 '12 at 12:59
@charlietfl I want to acheive the same thing as other tutorial has done. Problem is when I select from parent node then nodes(lists) falling below that are not being reset instead new list are populated along with old lists — Deadlock, Oct 16 '12 at 13:06
trying to help...but without enough html to replicate issue is not easy. The code in a working demo doesn't help, and it is unreasonable to need to have to sift through a whole tutorial to figure e out what's what — charlietfl, Oct 16 '12 at 13:12
@charlietfl Thankyou for continuous support, code updated with more html — Deadlock, Oct 16 '12 at 13:16
@Deadlock you should remove `.livequery()` and use `.live()` which is jquery native. — , Oct 16 '12 at 14:43

score 1 · Answer 1 · answered Oct 16 '12 at 14:46

1

you should remove the reference to the .livequery() plugin and use directly .live()

in this fiddle i've replicated the tutorial using the .live() functionality to show you how to use it

answered Oct 16 '12 at 14:46

I am fetching data from database each time so I want dynamic level chained list, but here I should know all the outcomes.. BTW Thanks for answer.. – Deadlock Oct 16 '12 at 15:01
@Deadlock the fiddle use a _fake_ list only to demonstrate the use of `.live()`, hope to have helped – Oct 16 '12 at 15:38
I am passing array as values from my controler so i have to manipulate it in JavaScript first and also live function is depreciated from jquery 1.8... thanks for helping.. – Deadlock Oct 17 '12 at 03:07
yup, didn't know it was deprecated. instead of `.live(event, func)` now is preferred to use `$(parentselector).on(event, childselector, func)` so, in your case it will be `$('#levels').on('click', '.parent', function(){})` – Oct 17 '12 at 07:20
I have updated main post and problem is solved now by using nextUntil BTW voted up for your efforts.. Thank you.. :) – Deadlock Oct 17 '12 at 10:32

Remove child div when parent is selected again

Update

1 Answers1