I am trying to delete or empty the element using JAVASCRIPT, but it must be the element we pass into the function as a parameter. It has to work onClick for example, everything has to work dynamically, but I can't get it to work. Here is my code so far:
function deleteElement(selector, type) {
switch (type) {
case `${"delete" || "remove"}`:
document.querySelector(selector).remove();
break;
case "empty":
document.querySelector(selector).innerHTML = "";
break;
// if user doesn't enter desired outcome, the element will be deleted by default
default:
document.querySelector(selector).remove();
break;
}
}
My question is, using this code how can I perform action on dynamically selected element?
If you want to remove the element without using a selector when its triggered you can pass this as the parameter instead of selector:
function removeEl(element){
element.remove();
}<div onclick="removeEl(this)">click</div>If you want to have an event listener for all of the divs sharing a same class/attribute/parent ... you can do it like this: (in this example the shared selector between your elements is div[data-type])
// looping thourgh all 'div's having a 'data-type' attribute
document.querySelectorAll('div[data-type]').forEach(element =>
// adding a simple onclick event listener
element.onclick = () => element.remove()
)<div data-type="hi">Hey</div>
<div data-type="type">Yes sir</div>I am pretty sure there must be a more elegant solution, but if you really require a listener, you could do something like this:
clickable.addEventListener("click",(selector, type) => {deleteElement('section')});
where clickable is a DOM-element you can set with a querySelector.