I'm erking on a scrip where I create dinamically a set of rows on a table. At the last column () I've added an icon to erase that row. On creating the row () I add to the icon one eventListner that calls a function, on that function for far now I just show a message on the console to check if I capture the event correctly and it works well. Now I'm trying to get the parent element () that contains the icon so can I remove it from the table.
This is my code from now:
This function creates a new row:
const addProductCart = () => {
const cartRow = document.createElement('tr');
cartRow.classList.add("itemRow");
const productColumn = document.createElement('td');
productColumn.innerHTML = optionList.options[optionList.selectedIndex].text;
cartRow.appendChild(productColumn);
const unitsColumn = document.createElement('td');
unitsColumn.innerHTML = units.value;
cartRow.appendChild(unitsColumn);
const unitPrice = document.createElement('td');
unitPrice.innerHTML = optionList.value;
cartRow.appendChild(unitPrice);
const totalPrice = document.createElement('td');
totalPrice.innerHTML = optionList.value * units.value;
cartRow.appendChild(totalPrice);
const removeButton = document.createElement('img');
removeButton.setAttribute("src", "data/icons/detele1.svg");
removeButton.classList.add("icon");
removeButton.addEventListener('click', eraseProduct);
cartRow.appendChild(removeButton);
carritoFila.appendChild(cartRow);
}
This function is launched every time you click on the erase button:
const eraseProduct = () => {
console.log(`clic`);
}