0

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`);
}
jcobo1
  • 1,065
  • 1
  • 18
  • 34

0 Answers0