Как удалить определенный пункт списка с помощью JavaScript?

Question

[Yuriy Berg]

Привет, есть вот такой код

<div class="container">
    <ul class="nav-cats">
      <li><a>Транспор</a> 
        <span style="float :right; opacity: .6" class="edit-section hide-btn">
           <span class="glyphicon glyphicon-trash delete"></span>
        </span>
      </li>
      <li><a>Продукты</a>
        <span style="float :right; opacity: .6" class="edit-section hide-btn">
           <span class="glyphicon glyphicon-trash delete"></span>
        </span>
      </li>
      <li><a>Работа</a>
        <span style="float :right; opacity: .6" class="edit-section hide-btn">
           <span class="glyphicon glyphicon-trash delete"></span>
        </span>
      </li>
      <li><a>Услуги</a>
        <span style="float :right; opacity: .6" class="edit-section hide-btn">
           <span class="glyphicon glyphicon-trash delete"></span>
        </span>
      </li>
      <li><a>Напитки</a>
        <span style="float :right; opacity: .6" class="edit-section hide-btn">
           <span class="glyphicon glyphicon-trash delete"></span>
        </span>
      </li>
      <li><a>Еда вне дома</a>
        <span style="float :right; opacity: .6" class="edit-section hide-btn">
           <span class="glyphicon glyphicon-trash delete"></span>
        </span>
      </li>
    </ul>
    <div class="add-new-cat button-edit">
      <i class="glyphicon glyphicon-cog"></i>
    </div>
  </div>

И вот начальный JS

var editTextCat = $('.delete');

    editTextCat.on('click', function(){
      
    });

Как сделать что бы при клике на Span с классом .delete удалялся пункт в котором был нажат этот класс delete?

Comments

[Виталий]

уточни как ты будешь кликать на span , когда там ничего нет. Может быть ты имеешь ввиду клик на Li с последующим удалением в нем спан delete?

Answer 1

[Никита Баев]

var editTextCat = $('.delete');
editTextCat.on('click', function(){
  $(this).parents('li').remove();      
});