código HTML
<div id="add-code"> <input type="text" class="code"> </div> <a id="new-code"></a>código de secuencia de comandos java
<script> $(document).ready(function(){$("#new-code").click(function(){$("#add-code").append(`<input type="text" class="code">`) }); $(".code").blur(function(){$(this).remove()}) }) </script>aquí hice una función de clic para mi etiqueta para agregar más campos de entrada y función de desenfoque en la clase de código para eliminar ese campo de entrada pero a medida que agrego más campos, los nuevos campos de entrada agregados no admiten la función de desenfoque
En realidad estabas muy cerca. Se olvidó de agregar el detector de eventos a los nuevos elementos cuando los estaba creando.
He corregido tu función aquí.
$("#new-code") .click(function(){ $("#add-code").append( $(`<input type="text" class="code">`).blur(function(){$(this).remove();}) ); }); $(".code") .blur(function(){ $(this).remove(); });Debido a que estos elementos se crearon después de que se cargó su JavaScript, nunca obtienen el detector de eventos. Por lo tanto, cuando creamos los nuevos elementos, debemos vincular el detector de eventos a ellos antes de agregarlos al contenedor.
Debido a que el detector de eventos blur solo se llama una vez, por lo que está activo solo en las entradas existentes actualmente.
Debe llamarlo cada vez que agregue una nueva entrada como esta:
$(document).ready(function () { $("#new-code").click(function () { $("#add-code").append(`<input type="text" class="code">`); $(".code").last().blur(function () { $(this).remove(); }); }); });Ejemplo de trabajo => https://codepen.io/moaaz_bs/pen/NWwGzvy?editors=1010