CODEWITHSUNDEEP
javascript
user15723984
user15723984

Reputation:

dynamically add remove elements using JS

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 class="fas fa-times text-red-600"></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()
    })
})

Upvotes: 0

Views: 493

Answers (3)

Kinglish
Kinglish

Reputation: 23654

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

Upvotes: 1

user15723984
user15723984

Reputation: 

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

Upvotes: 0

Marco
Marco

Reputation: 23937

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 class="fas fa-times text-red-600"></i>'
remove.setAttribute('type', 'button')
remove.addEventListener('click', (e) => {
    e.target.parentElement.remove()
})

Upvotes: 1

Related Questions