Question

I have 2 parent divs (old & new), if I click the Click to Add, I’m trying to get the divs in the new list to “merge” with the old list, and remove the new list. There are 2 id=”div3″ one in old and one in new. When they are merged old>id=”div3″ should overwrite new>id=”div3″ it or just remove itself instead. The reason the div id’s may be repeated is because id=”new”>divs will be outputted from the server and I just want unique id’s in the old list.

<span id="adder">Click 2 Add</span>

<div id="old">
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
</div>

<div id="new">
<div id="div3">div3</div>
<div id="div4">div4</div>
<div id="div5">div5</div>
</div>

http://jsfiddle.net/5kDGR/12/

Answer 1

Is that what you want ?
http://jsfiddle.net/5kDGR/17/

   $("#adder").click(function() {

   var content = $('<div/>');
   $('#new div').each (function()
                    {
                        content.append(this);
                    });
   $('#old div').each(function ()
   {
      if (!($(content).find('#' + $(this).attr('id')).length))
      {
          content.prepend(this);
      }
   });
   $('#old').html(content);
   $('#new').remove();
});

​