Tengo una sección simple en la que los usuarios pueden agregar campos de entrada dinámicamente y los usuarios deberían poder eliminar los campos de entrada agregados haciendo clic en el botón Eliminar. estoy usando vainilla js

aquí hay una demostración en vivo: demostración en vivo codepen

HTML

 <div id="domains-wrapper"> <div class="input-group"> <input name="domains" type="text" class="form-control domain-url" placeholder="Type valid url" value="" required=""> <div class="valid-feedback">Looks good!</div> <button id="default-delete" style="display: none;" class="default-delete delete-input-el domain-btn btn-sm border border-1" type="button"> </button> <button id="default-add" class="add-input-el added-input plus-button btn-sm border border-1 add_form_field" type="button"> <span class="add-icon">+ </span> </button> </div> </div>

js

 var max_fields = 10; var wrapper = document.getElementById("domains-wrapper"); var add_button = document.getElementById("default-add"); var x = 1; add_button.addEventListener('click', function(e) { e.preventDefault(); if (x < max_fields) { x++; $(wrapper).append('<div><input id="delete" type="text" name="mytext[]"/><a href="#" class="delete">Delete</a></div>'); //add input box } else { alert('You Reached the limits') } }) var deleteBtn = document.querySelectorAll(".delete"); deleteBtn.forEach(function(e) { e.addEventListener('click', function() { console.log('PL') this.parentNode.remove(); //remove the whole div containing input and delete button }) });

Problema, ahora cuando hago clic en el botón Eliminar, no sucede nada,

¿Alguna idea de lo que me estoy perdiendo aquí?