CSS - Como añadir un icono a un elemento lista y que se pueda interactuar con el

 
Vista:
sin imagen de perfil
Val: 2
Ha disminuido su posición en 7 puestos en CSS (en relación al último mes)
Gráfica de CSS

Como añadir un icono a un elemento lista y que se pueda interactuar con el

Publicado por Angelo (1 intervención) el 17/08/2020 23:05:56
Hola buenas amigos!

Estoy con un pequeño proyecto para practicar un poco html y css y tenia una consulta de algo que quiero realizar pero no se como programarlo

Estoy realizando como una aplicación de tareas mediante elementos lista que se podrán añadir y quitar con JS pero me gustaría que este elemento se eliminara clicando sobre un icono al final de la linea.

Algo parecido a esto:

Captura-de-pantalla-2020-08-17-a-las-22.55.24

por el momento tengo algo así:




Captura-de-pantalla-2020-08-17-a-las-22.58.50

Pero me gustaria que la Equis estuviera al final como en la maqueta de la primera imagen y que ademas este funcionara para interactuar con el al usar JS y que cada vez que añada un nuevo elemento a la lista esta Equis salga tambien.

Por el momento el codigo que se me ha ocurrido es esté;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="wrapper">
 
    <div class="group">
        <input type="text" required>
        <span class="highlight"></span>
        <span class="bar"></span>
        <label>Escribe tú tarea</label>
      </div>
 
      <div class="container container-one">
        <button>
            Agregar
            <div class="fill-one"></div>
        </button>
    </div>
 
        <br>
 
        <div class="contenedor">
            <ul class="tareas">
                <li><a>Hola soy una tarea de ejemplo
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder