Removing fields from a list

Question

Removing fields from a list

Navigation

#1 by (3 votes)

0

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

HowcanIdothis?Isitanattributeorisitconfigurablebyanotherlanguage??
Forgivenessofignorance

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

javascript html5 css

asked by anonymous 23.10.2017 / 17:47

1 answer

How do I make the Button work only if EditText is populated? How to send multiple folders using SSH (SCP)

score 3 · Accepted Answer

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.