partes mais importantes finalizadas

app.js

@@ -62,6 +62,7 @@ class Bd {
 				continue
 			}
 
+			despesa.id = i
 			despesas.push(despesa)
 		}
 		return despesas
@@ -100,6 +101,9 @@ class Bd {
 		return despesasFiltadas
 	}	
 
+	remover(id) {
+		localStorage.removeItem(id)
+	}
 }
 
 let bd = new Bd()
@@ -180,7 +184,7 @@ function carregaListaDespesas(despesas = new Array(), filtro = false) {
 	listaDespesas.innerHTML = ''
 
 	// percorrer o array despesas listando cada despesa de forma dinâmica
-	despesas.forEach(function(d) {
+	despesas.forEach(d => {
 		//console.log(d)
 	  // Criando a linha tr
 	  let linha = listaDespesas.insertRow()
@@ -205,6 +209,19 @@ function carregaListaDespesas(despesas = new Array(), filtro = false) {
 		linha.insertCell(2).innerHTML = d.descricao
 		linha.insertCell(3).innerHTML = d.valor
 
+		// Criar um botão para exclusão
+		let btn = document.createElement('button')
+		btn.className = 'btn btn-danger'
+		btn.innerHTML = '<i class="fas fa-times"></i>'
+		btn.id = `id_despesa_${d.id}`
+		btn.onclick = function() { 
+			let id = this.id.replace('id_despesa_', '')
+
+			bd.remover(id)
+
+			window.location.reload()
+		}
+		linha.insertCell(4).append(btn)
 	})
 
 }

consulta.html

@@ -56,7 +56,9 @@ <h1 class="display-4">Consulta de despesas</h1>
         <div class="col-md-2">
           <select class="form-control" id="ano">
             <option value="">Ano</option>
-            <option value="2018">2018</option>
+            <option value="2020">2020</option>
+            <option value="2021">2021</option>
+            <option value="2022">2022</option>
           </select>
         </div>
 

index.html

@@ -61,6 +61,8 @@ <h1 class="display-4">Registro de nova despesa</h1>
           <select class="form-control" id="ano">
             <option value="">Ano</option>
             <option value="2020">2020</option>
+            <option value="2021">2021</option>
+            <option value="2022">2022</option>
           </select>
         </div>  <!-- Fim ano -->