You will be using jQuery or javascript for this, and can be done with CSS only.
I'm going to give a response with jQuery, just add a 'click'
event to the remove button, and remove the closest li element searched with 'closest'
, in case I used the hide()
method, but there are other methods too.
Here is a working 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>coisa1<ahref="#" 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.