eventlistener not working for dynamically created element

January 25, 2022

I have a simple section in which users can add input fields dynamically and users should be able to remove added input fields by clicking the delete button. am using vanilla js

here is a live demo : demo live 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>

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
    })
});

Problem, Now when I click the delete button nothing is happening,

Any idea what am I missing here?

>Solution :

your are not recovering the .delete to add listener after the click on more button

so delete field don’t have listener

I can propose you to add the listener after the field append to solve your situation

    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++;
            var deleteField = document.createElement('div');
            deleteField.insertAdjacentHTML('beforeend', '<input id="delete" type="text" name="mytext[]"/>');
            var a = document.createElement('a');
            a.href= '#';
            a.innerText = 'Delete';
            a.classList.add('delete');
            deleteField.append(a);
            wrapper.appendChild(deleteField); //add input box
              a.addEventListener('click', function() {
              var target = e.target || e.srcElement;
              console.log('PL')
              deleteField.remove();
           })
        } else {
            alert('You Reached the limits')
        }
    })

    <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>