Removing fields from a list

Question

I have a question. I created a list and wanted to remove its elements by clicking on 'x' as in the following image (I put x by Paint):

How can I do it this way? It is an attribute or is configurable by another language??
Pardon the ignorance

<input list="sel-opts" id="new-opt" />
<datalist id="sel-opts">
	<option>#</option>
    <option>@</option>
</datalist>

Answer 1

You will use jQuery or javascript for this, and can also be done only with CSS.

I’ll give you an answer with jQuery, just add an event 'click' to remove button, and remove the nearest li element searched with 'closest', in this case I used the method hide(), but there are also other methods.

Following functional example:

$(document).on('click','.remover',function(){
   $(this).closest('li').hide();
});

$(document).on('click','.mostrar',function(){
   $(this).closest('ul').find('li').show();
});

.remover {
text-decoration: none;
float:right;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
  coisa 1 <a href="#" class="remover fa fa-minus"> </a>
  </li>
  <li>
  coisa 2 <a href="#" class="remover fa fa-minus"> </a>
  </li>
  <li>
  coisa 3 <a href="#" class="remover fa fa-minus"> </a>
  </li>
  <li>
  coisa 4 <a href="#" class="remover fa fa-minus"> </a>
  </li>
  <li>
  <a href="#" class="mostrar"> (Mostrar tudo)</a>
  </li>
</ul>

PS: There are several answers that would answer this question, in my opinion jQuery makes life easier.