¿Cómo ejecuto la misma acción para cada evento? Cuando el usuario selecciona una opción, necesito mostrar una tabla. Y cuando seleccionen otra, mostrar otra tabla. Pero las tablas se mostraban una por una. Así que agregué una acción para eliminar, pero ahora la tabla solo aparece la mitad del tiempo. ¿Cómo puedo hacer una lista de eventos seleccionados, que no desaparezca después del segundo clic y no repita las tablas?
function getTableRegion(select, divResutl) { select.addEventListener('change', function (ev) { cleanMessage(divResutl); console.log(ev) if (document.getElementById('table')) { divResutl.removeChild(document.getElementById('table')) } else { let tbody = document.createElement('tbody'); let table = document.createElement('table'); table.id = 'table'; table.setAttribute('style', 'display:table'); tbody.innerHTML = `<tr><th>Country name</th> <th>Capital</th><th>World region</th><th>Languages</th> <th>Area</th><th>Flag </th></th></tr>`; table.append(tbody); divResutl.append(table); } }) }Gracias
No hay razón para hacer if/else. Si existe, elimínelo y agregue el siguiente.
function getTableRegion(select, divResutl) { select.addEventListener('change', function(ev) { cleanMessage(divResutl); console.log(ev) if (document.getElementById('table')) { document.getElementById('table').remove(); } let tbody = document.createElement('tbody'); let table = document.createElement('table'); table.id = 'table'; tbody.innerHTML = `<tr><th>Country name</th> <th>Capital</th><th>World region</th><th>Languages</th> <th>Area</th><th>Flag </th></th></tr>`; table.append(tbody); divResutl.append(table); }) }