Question

Hey guy’s just a quick question.

Im making a sortable, drag and drop system and i need it, when the user drags the message to the delete box it will .remove(); and will disappear (well remove it) but the issue is it removes the little elements of the message like the subject, I want it to remove the whole div for example one of the “message” elements. So how do you get the parentNode of this which is the message div

It does refresh the messages so don’t worry about the messages

The Code i have is

<div class="message 1" id="1">  // I want to remove this part and only this part
                    <ul id="8">
                        <li class="dragable" id="2">
                            <!-- Dragable -->

                        </li>
                        <li class="checkbox" id="4">
                            <input type="checkbox" name="checkbox" class="checkbox" id="messagecheck1">
                        </li>
                        <li id="3"> 
                            <p> hi</p>
                        </li>
                    </ul>
                </div>

js

$(".messageholder").sortable({          
        start: function(event, ui){
            $(ui.item).css("opacity", "0.25");
            draggable_sibling = $(ui.item).prev();
            $(".deletebox").show();
        },

        stop: function(event, ui) {
            $(".deletebox").hide();
            if (dropped) {
                if (draggable_sibling.length == 0)
                    $('.messageholder').prepend(ui.item);

                draggable_sibling.after(ui.item);
                dropped = false;
            }
            $(ui.item).css("opacity", "1.00");
        },
        update: function(event, ui){
            //Use's Xhr to save the position of the message
            var array = [];
            $(".messageholder div").each(function(e){
                 array.push($(this).attr('id'));
            });
            $.ajax({
                type: 'POST',
                url: 'json/save.php',
                data: ("data="+array)                           
            });

        }   


    }); 

        $(".refresh").click(function(){
            checkmessages();        
        });     

        $(".deletebox").droppable({         
                drop:function(event, ui){
                    dropped = true;                 
                    $(event.target.parentNode).closest('div').remove();


                    }               

        });     


        $(".messageholder").disableSelection();

Their are multiple elements with the same class name so i can’t remove the messages class out in one line of code, I would have to select the element individually and remove it like that.

Link http://grubber.co.nz/messages/

Answer 1

If you are using jQuery, a quick google search should turn up .parent() : http://api.jquery.com/parent/

Additional

You can also use .closest(selector) if you need to use a selector to find an ancestor that’s not the immediate parent : http://api.jquery.com/closest/