Jquery guru needed

[iamthwee]

Hi all, I have some HTML as follows and I want it so when you click on an <li> it returns the dd3-content and url.

<div class="dd" id="nestable3">
    <ol class="dd-list" id="start">
        <li class="dd-item dd3-item">
            <div class="dd-handle dd3-handle"></div>
            <div class="dd3-content">Home</div>
            <div class="url" style="display:none;">homeurl</div>
        </li>
        <li class="dd-item dd3-item">
            <div class="dd-handle dd3-handle"></div>
            <div class="dd3-content">About Us</div>
            <div class="url" style="display:none;">abouturl</div>
        </li>
        <li class="dd-item dd3-item">
            <div class="dd-handle dd3-handle"></div>
            <div class="dd3-content">Gallery</div>
            <div class="url" style="display:none;">galleryurl</div>
            <ol class="dd-list">
                <li class="dd-item dd3-item">
                    <div class="dd-handle dd3-handle"></div>
                    <div class="dd3-content">Contact</div>
                    <div class="url" style="display:none;">contacturl</div>
                </li>
            </ol>
        </li>
    </ol>
</div>

My problem is if it more than one level deep. It is returning the li above it as well

I just need the level clicked. Also I'm looking to write a delete option to delete the <li> clicked and the immediate ones below it. I can, if needed give each <li> a unique id. How can I achieve this.

http://jsfiddle.net/R89Xk/1/

[pritaeas]

Use: http://api.jquery.com/event.stoppropagation/

It stops the event from "bubbling up".

$(".dd-item").click(function(){
    alert($(this).find('.dd3-content').html());
    alert($(this).find('.url').html());
    event.stopPropagation();
});

[DJBirdi]

Use: http://api.jquery.com/event.stoppropagation/

It stops the event from "bubbling up".

Perfect solution, but don't forget to pass "event" as the function's parameter. Won't work (in some browsers) otherwise.

$(".dd-item").click(function(event){
    alert($(this).find('.dd3-content').html());
    alert($(this).find('.url').html());
    event.stopPropagation();
});

[iamthwee]

Thanks guys that's just great. Now I need a way to click on a <li> item and change the dd3-content field and url field. I have decided to give each li item a unique id.

So how may I do this? And I need a way to delete a selected node.

[pritaeas]

So how may I do this?

http://api.jquery.com/html/

Pass the new value.

And I need a way to delete a selected node.

http://api.jquery.com/remove/

[iamthwee]

I'm really struggling with the update... I think I can do the remove since I've assigned each li and unique id.

Please can you help me with the update, here is my latest fiddle.

http://jsfiddle.net/R89Xk/8/

[pritaeas]

Man... it's so simple:

alert($(this).find('.dd3-content').html('Hello'));

[iamthwee]

Damn, so it is. I so suck at jquery. I guess this is solved. Thanks

[iamthwee]

I just realised the replace html isn't working properly I needed to add:

$(this).find('.dd3-content').eq(0).html('Hello');

To limit it to the li clicked.