Simplemente tengo datos que provienen de jinja2. Quiero filtrar los datos cuando hice clic en el botón. Otra solución podría ser pasar los datos a una variable javascript.
He creado un ejemplo para una definición más clara. En este caso, quiero eliminar los números que son menores de 5. Luego los enumero en html.
En plantilla;
{% set data = [1,2, 3, 4, 5, 6, 7, 8, 9] %} <ul> {% for item in data %} <li>{{ item }}</li> {% endfor %} </ul> <button class="btn">Filter Data</button>en guión
const btn = document.querySelector('.btn'); btn.addEventListener('click', () => { // filter here }La solución más simple es que también proporcione el valor de los datos como un atributo del elemento de la lista, por ejemplo data-index :
{% set data = [1,2, 3, 4, 5, 6, 7, 8, 9] %} <ul class="mylist"> {% for item in data %} <li data-index="{{ item }}">{{ item }}</li> {% endfor %} </ul> <button class="btn">Filter Data</button> Luego, recorre los elementos de la lista después del evento de clic y, según el valor de el.dataset.index , puede eliminar los elementos respectivos:
const btn = document.querySelector('.btn'); btn.addEventListener('click', () => { let items = document.querySelectorAll(".mylist li") Array.from(items, el => { if (el.dataset.index < 5) { el.remove() // Or: el.style.display = 'none' } }) }