Clone Div When Clicked And If It Is Already Cloned When Clicked Again Remove Clone

Question

Clone Div When Clicked And If It Is Already Cloned When Clicked Again Remove Clone

Navigation

#1 by (1 votes)

-1

Good Colleagues, The Truth, I'm New In Jquery And Javascript, I'd appreciate it if you helped me with this problem. I have a series of buttons, the ones that I wish to clone and add a new div, okay, that I already did, the problem the cloned button if it already exists. Something Better Explained, Click, Cloned The Button And I Add It To A New Div, And If I Go Back To Clicking On The Same Button, It Clones The Elimination Of The New Div And So With The Other Buttons, Here I Leave Some Of What I have. Thanks to all for the help.

var ClickButtons =  [].slice.call(document.querySelectorAll('.button'));
					 
				     ClickButtons.forEach(function (element, i){
						element.addEventListener('click', function (e){
							e.preventDefault();
						var Copy = $(element).first().clone().addClass('clone').appendTo(".agg-bet");
						 
						 
											  
						  
						 });
						
					 });

.agg-bet{
background-color:#0c3;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
  <tr>
                             <td class="mb-option-button">
                             <button type="submit" class="button">									
					        <div class="name-team-option">Levante</div>
					        <div class="name-value-option">5001.00</div>
								</button>
                             
							</td>
                             <td class="mb-option-button">
								<button type="submit" class="button">									
					        <div class="name-team-option">Leganés</div>
					        <div class="name-value-option">5001.00</div>
								</button>
							</td>
                     </tr>
                        <tr>
                             <td class="mb-option-button">
								<button type="submit" class="button" >									
					        <div class="name-team-option">Girona</div>
					        <div class="name-value-option">5001.00</div>
								</button>
							</td>
                             
                     </tr>
                       


</tbody>
</table>

<div class="agg-bet"></div>

javascript jquery

asked by Sabi21 18.07.2017 в 04:38

source

1 answer

get value of an html tag in javascript Obtain the server response URL with c #

score 1 · Answer 1

You can use this snippet, what it does is create individual events, these events keep a state from it you decide if you should add the element or delete it

;(function()
{

function crearEvento(objetivo, destino)
{
  var agregado = false
  var clon = objetivo.cloneNode()
  
  return function(e)
  {
    if (agregado)
      {
        destino.removeChild(clon)
        agregado = false
      }
    else 
      {
        destino.appendChild(clon)
        agregado = true
      } 
  }
}

var botones = document.querySelectorAll('#botones input[type="button"]')
var destino = document.getElementById('resultado')
for(boton of botones)
  {
    boton.addEventListener('click', crearEvento(boton, destino), false)  
  }

}())

#resultado 
{
  background-color: lightgreen
}

<div id="botones">
<input type="button" value="op1" />
<input type="button" value="op2" />
<input type="button" value="op3" />
<input type="button" value="op4" />
</div>
<div id="resultado">
</div>

The important part of the code is crearEvento(objetivo, destino) which creates an event to add the target element to a specific destination .