Reseting Node Order and Hiding event.srcElement

Question

I am building a custom company hierarchy and need to be able to "Promote" a Div up the ranks in the company chart. I have the trigger nestled as a span inside of each div. The click event is set to find the parent div and swap it with the previous div. I have that working just fine the problem is:

1. I need to "reset" the order of the nodes in the document after this so that subsequent swaps go off of the new order and not the order that existed upon the load.

2. I need to lookup where the div that swapped up falls within the group and if it is the first of the series to hide the span which contains the up button. I would imagine something with this logic:

   if(event.srcElement.parent().prev() = Null { 
       event.srcElement.parent().hide() 
   }; else { 
       return false;
   };
   

I know the syntaxes are wrong but I'm a total n00b with js. So please point me in the right direction.

This is the code I am using right now. As it stands if I swap order of 3 elements from 1,2,3 to 2,1,3 you would think that clicking the swap on 3 would switch it with the 1 which is prior to it now but it swaps it with 2, the element that preceded it upon pageload.

<script type="text/javascript">

$(document).ready(function() {  

    $(".go-swap").click(function() {  
        $(this).parent().parent().prev().swap({  
            target: (this).parentNode.parentNode.id, 
            opacity: "0.5", 
            speed: 1000, 
            callback: function() { 
            event.srcElement.parent().hide()
            } 
        });  
    });  
});  
</script>

<div class="known" id="A101">
    Contact 1
    <span class="plus">
        <a href="javascript://" class="go-swap"><img src="images/uparrow.gif" border="0" /></a>
    </span>
 </div>
 <div class="known" id="A102">
    Contact 2
    <span class="plus">
        <a href="javascript://" class="go-swap"><img src="images/uparrow.gif" border="0" /></a>
    </span>
 </div>
 <div class="known" id="A103">
    Contact 3
    <span class="plus">
        <a href="javascript://" class="go-swap"><img src="images/uparrow.gif" border="0" /></a>
    </span>
 </div>

Answer 1

Here are your options

1) Server side code + db:

If you want the entire organisation to view the "new structure" you will have to use a database and server side code. You can't edit the actual file with client side javascript.

2) localstorage:

If it is just you using it, you can save the data in localstorage, and access the structure each time you load the page.