dynamically add remove elements using JS-CodePudding

There is a form on the page that is added to that element by clicking the add button And by pressing the delete button, the created element will be deleted The problem is that the elements that exist on the page before adding can be deleted But the elements that are added by clicking the add button cannot be deleted.


let form = document.getElementById('aboutForm');

document.getElementById('addMore').addEventListener('click', () => {

    //Make Div
    const div = document.createElement('div')
    div.classList = 'bg-gray-300 p-5 mt-6 relative'


    //Title Label
    const TitleLabel = document.createElement("label")
    TitleLabel.classList = 'block text-sm text-gray-600'
    TitleLabel.innerText = ` title`
    TitleLabel.setAttribute('for', 'Side_Title')


    //Title Inputbox
    const TitleInputbox = document.createElement("input")
    TitleInputbox.classList = 'w-full border-none px-5 py-1 text-gray-700 bg-gray-200 rounded'
    TitleInputbox.setAttribute('name', 'Side_Title[]')
    TitleInputbox.setAttribute('id', 'Side_Title')


    //Caption Label
    const CaptionLabel = document.createElement("label")
    CaptionLabel.classList = 'block text-sm text-gray-600 mt-6'
    CaptionLabel.innerText = ` caption`
    CaptionLabel.setAttribute('for', 'Side_Caption')

    //Caption Inputbox
    const CaptionInputbox = document.createElement("input")
    CaptionInputbox.classList = 'w-full border-none px-5 py-1 text-gray-700 bg-gray-200 rounded'
    CaptionInputbox.setAttribute('name', 'Side_Caption[]')
    CaptionInputbox.setAttribute('id', 'Side_Caption')


    //Remove Button
    const remove = document.createElement("button")
    remove.classList = 'absolute text-xl top-0 left-2 removeElement'
    remove.innerHTML = '<i ></i>'
    remove.setAttribute('type', 'button')

    //Appernd Elements
    form.append(div)
    div.appendChild(TitleLabel)
    div.appendChild(TitleInputbox)
    div.appendChild(CaptionLabel)
    div.appendChild(CaptionInputbox)
    div.appendChild(remove)


})

document.querySelectorAll('.removeElement').forEach(e => {
    e.addEventListener('click', () => {
        e.parentNode.remove()
    })
})

CodePudding user response：

The problem is, that the button you are adding, those not have any event listeners attached to it, that handle the click event.

All the elements that actually exist, when the js is running on load do get the click handler, but elements that you dynamically add, do not. So you have to tell your code what to do, when one of those elements does get clicked.

//Remove Button
const remove = document.createElement("button")
remove.classList = 'absolute text-xl top-0 left-2 removeElement'
remove.innerHTML = '<i ></i>'
remove.setAttribute('type', 'button')
remove.addEventListener('click', (e) => {
    e.target.parentElement.remove()
})

CodePudding user response：

You can use an event delegate which will work even on dynamically created buttons. Put the listener on a static container object, like the form itself, then sniff for the button on click

form.addEventListener('click', e => {
   if (e.target.classList.contains('removeElement')) {
      e.target.closest('div.relative').remove()
   }
})

CodePudding user response：

    //Remove Button
    const remove = document.createElement("button")
    remove.classList = 'absolute text-xl top-0 left-2 removeElement'
    remove.innerHTML = '<i ></i>'
    remove.setAttribute('type', 'button')
    remove.addEventListener('click', () => {
      div.remove()
    })