Jquery-Clone() append

Question

Hi, I am facing an issue whlie trying to clone a parent div and then appending it directly under itself. My function works fine as long as the last node is selected so:

 <div>
 <div> A </div>
 <div> B </div>
 <div> C </div>
   </div>

will result in

<div>
 <div> A </div>
   <div> A.1 </div> 
 <div> B </div>
 <div> C </div>
   </div>

If i clone A. But if I clone A again I get.

<div>
 <div> A </div>
   <div> A.1 </div>
 <div> A </div>
   <div> A.1 </div>
 <div> B </div>
 <div> C </div>
   </div>

while I would like

<div>
 <div> A </div>
   <div> A.1 </div>
   <div> A.1 </div>
 <div> B </div>
 <div> C </div>
   </div>

My markup and code are below:

<div id="maindiv">
 <div>
  <label>First</label> 
  <input type="button" class="repeat1" onclick="Repeat(this)"/>
 </div>
 <div>
  <label>Second</label> 
  <input type="button" class="repeat1" onclick="Repeat(this)"/>
 </div>
 <div>
  <label>Third</label> 
  <input type="button" class="repeat2" onclick="Repeat(this)"/>
 </div>

</div>

function Repeat(obj)
{
 var CurrentDiv = $(obj).parents("div[class^='repeat']:first");
 $(CurrentDiv).clone().appendTo(CurrentDiv).end();

}

I also have a similar issue with deleting where all the child nodes are deleted while I just want a single div removed. Any help would be appreciated. The remove function is

function Remove(obj)
    {
     var CurrentDiv = $(obj).parents("div[class^='repeat']:first");
     CurrentDiv.remove();

    }

Answer 1

I think your markup is confused:

<div>
 <div> A </div>
 <div> B </div>
 <div> C </div>
</div>

using this in the body of repeat:

$(obj).clone().text('A 1').insertAfter(obj);

should produce:

<div>
 <div> A </div>
 <div>A 1</div>
 <div> B </div>
 <div> C </div>
</div>

Likewise using this as the body of your remove function: $(obj).siblings('div:first').remove();

should then do this:

<div>
 <div>A 1</div>
 <div> B </div>
 <div> C </div>
</div>

Id that what youre trying to do or ami i misunderstanding? Also what is the siginifigance of the "repeat*" class or was that a thing to use as a selector for what youre trying to implement?

Answer 2

Is this what you are trying to do?

function Repeat(obj)
{
 var currentDiv = $(obj).parent("div");
 currentDiv.clone().insertAfter(currentDiv);
}

UPDATE: If you want nesting, try this:

<div id="maindiv">
  <ul>First
   <li>
    <label>Sub-first</label> 
    <input type="button" class="repeat1" onclick="Repeat(this)"/>
   </li>
 </ul>

 <ul>Second
  <li>
   <label>Sub-second</label> 
   <input type="button" class="repeat1" onclick="Repeat(this)"/>
  </li>
 </ul>

 <ul>Third
  <li>
   <label>Sub-third</label> 
   <input type="button" class="repeat2" onclick="Repeat(this)"/>
  </li>
 </ul>   
</div>

<script>   
function Repeat(obj)
  {
    var CurrentLi = $(obj).parent("li");
    CurrentLi.clone().insertAfter(CurrentLi);
  }
</script>

Answer 3

Two things:

• (1) The way I read it, the call to $.end() is superfluous; I believe $.end() is only useful if you're going to chain more calls after it.

• (2) It looks like you're trying to attach the clone of CurrentDiv as a direct child (not sibling) of CurrentDiv; Since these are both elements, I'm not sure if it makes sense.

But if it does make sense, than it's completely natural that both A and the previous clone would be cloned in the second call to Repeat().

Lastly -- just FYI, your variable and function names aren't idiomatic. It's more customary to start with a lower-case letter.