El JS y el HTML en este jsfiddle y que se muestran a continuación son parte de un menú de configuración, que es una lista de URL y un botón 'x' al lado de cada uno. Esto es parte de mi bifurcación de esta aplicación RSS , por lo que no es algo que esté creando desde cero. En la práctica se parece a:
x foo.com x bar.com/rss x baz.com/feed La función renderSettings() inyecta datos de una matriz JSON en el div <template id="settings-feed-item"> , por lo que no aparece nada en la vista previa de JSFiddle. Esa función también agrega la funcionalidad onclick a cada instancia de #remove div.
Aparte de otro código que he recortado por brevedad, quiero aplicar estilo CSS a un #feedurl cuando se hace clic en #remove junto a él.
El problema que tengo es que no sé cómo seleccionar #feedurl . He intentado this. y el método closest() pero no puedo seleccionarlo. Todo lo que he intentado hasta ahora me da TypeError: undefined is not an object en la consola. ¿Qué me estoy perdiendo?
<section id="feedsection"> <ul id="feeds"> <template id="settings-feed-item"> <li> <a id="remove">x </a><span id="feedurl"></span><a></a> </li> </template> </ul> </section> // RENDER SETTINGS MENU function renderSettings() { keywords.value = state.keywords; newsFeeds.innerHTML = ''; state.feeds.forEach(f => { const el = document.importNode(feedItem.content, true).querySelector('li'); el.querySelector('span').innerText = simplifyLink(f.url); // ... // onclick `#remove` el.querySelectorAll('a')[0].onclick = () => { // SELECT URL NEXT TO CLICKED X }; // ... }); }Quieres al próximo hermano.
el.querySelectorAll('a')[0].onclick = (e) => { e.currentTarget.nextElementSibling.classList.add('someclass'); }; Por cierto, se supone que las ID son únicas, por lo que no debe duplicar id="feedurl" en la copia. Use clases en lugar de ID.