He clonado divs que contienen botones que clonan a sus padres. Al intentar hacer clic en los botones, los eventos se activan 2n veces, de modo que al hacer clic en el segundo clon se producen otros 4 clones, y así sucesivamente:
$(".add").off("click").on("click", function(e) { e.stopPropagation(); e.stopImmediatePropagation(); $(".cloneable").clone(true).appendTo(".container"); }); $(".rem").off("click").on("click", function() { if (document.getElementsByClassName('container')[0].childElementCount > 1) { $(".cloneable:last").remove(); } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="cloneable"> <div> <a class="btn btn-primary add" role="button">Add cell</a> <a class="btn btn-primary rem" role="button">Remove cell</a> </div> <iframe src="index.php"></iframe> </div> </div>Unas pocas cosas.
first . jQuery encontrará todos los cloneable y los clonará, no solo su original.disabled se agregará/eliminará al botón rem , dependiendo de si solo queda una o no. $(".container").on("click", ".add", function(e) { e.stopPropagation(); e.stopImmediatePropagation(); $(".container .rem").removeClass("disabled"); let $cloneable = $(".cloneable").first().clone(true); $cloneable.appendTo(".container"); }).on("click", ".rem", function() { if($(this).hasClass("disabled") ) return; $(this).closest(".cloneable").remove(); if($(".container .rem").length === 1) $(".container .rem").addClass("disabled"); }); .btn.btn-primary { background:#d5d5d5;padding:4px;cursor:pointer; } .btn.btn-primary.disabled { background:red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="cloneable"> <div> <a class="btn btn-primary add" role="button">Add cell</a> <a class="btn btn-primary disabled rem" role="button">Remove cell</a> </div> <iframe src="trial37.php"></iframe> </div> </div> $(".add").on("click", function(e) { $(this).parent(".cloneable").clone(true).appendTo(".container"); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="cloneable"> <a class="btn btn-primary add" role="button">Add cell</a> <div>CONTENT</div> </div> </div> Entonces, lo que sucede en su método es que está realizando una nueva consulta cada vez que hace clic y devuelve todos los elementos .clonable y luego los clona. Lo que desea es encontrar solo el elemento relevante para el elemento en el que hizo clic, por lo que desea comenzar con $(this) , que es el elemento en el que se hizo clic, y luego puede usar el método parent() para subir el árbol DOM en busca de el seleccionador
En este tipo de situaciones, puede ayudar poner un debugger; dentro de su evento de clic y luego ejecute el método uno a la vez. Como $('.clonable') . Luego puede ver que tal vez se hace más grande cada vez y que apuntan a todos los elementos existentes.