How can I delete after drag and drop?

JavaScript
#1

I created a simple drag and drop system, the elements I added are normally deleted when I click the “X” text, but when I apply drag and drop events to this element and put it into another container, that element can no longer be deleted, you can check my codepen account to try. I’ll put a short code block below, but it’s all in the codepen
Codepen: https://codepen.io/BerkayAkgurgen/pen/dyOZezE

function dragOver() {
    boxs.forEach(container => {
        container.addEventListener('dragover', function (e) {
            const draggable = document.querySelector('.draggable')
            container.appendChild(draggable)
            e.preventDefault()
        })
    })
}
function removeLocalItem(value) {
    let storageElement = getLocalStorage()
    storageElement = storageElement.filter(function (item) {
        if (item.name !== value) {
            return item
        }
    })
    localStorage.setItem('Item', JSON.stringify(storageElement))
}
#2

Hello there,

This is likely a very similar issue to what I have just been having:
React State Management with Element Re-organisation - JavaScript - The freeCodeCamp Forum

The just of these types of problems is:

  • Keeping track of each item with a unique identifier
  • Ensuring the event listeners all remain as the element is passed around.

Hope this helps some.

#3

Add the click event listener to the draggable element (i.e. inside createItem on wrapper), not the parent container (box).

Also, you will want to move preventDefault up so it always runs otherwise if you submit the same text twice it will submit the form.