Событие клика по иконке внутри div, которая также активна - PullRequest
Новая
       4

Событие клика по иконке внутри div, которая также активна

0 голосов
/ 24 октября 2019

У меня есть div, которые служат в качестве выпадающего меню при нажатии. У меня также есть значок корзины, если пользователь хочет удалить каждый элемент из списка. Я пытаюсь удалить весь элемент div со страницы, если щелкнул значок корзины.

Я попытался получить доступ к значку с помощью события click, но он все равно выпадает из div. 

<div class="collapsible btn-collaps text-center valid-files collapsed"
aria-expanded="false"
data-target="#a1"
data-toggle="collapse">
<i class="fa fa-trash fa-lg float-left remove"
aria-hidden="true"></i>
test.txt</div>


<div class="collapse" id="a1">
    <ul class="list-group">
        <li class="list-group-item">Sub value</li>
        <li class="list-group-item">sub value 2</li>
        <li class="list-group-item">sub value 3</li>
    </ul>
</div>

$(".remove").on('click', function(e){
    alert('test');
});

Однако это не приводит к предупреждению страницы "test". Это также не сработает, если я сделаю 

$(".valid-files").on('click', function(e){
    alert('test');
});

. Что я в итоге хочу сделать, это удалить кликабельный div вместе с соответствующим div, содержащим список при нажатии на значок корзины. Я думаю, что могу управлять этой частью самостоятельно, но я не уверен, как получить доступ к событию щелчка значка. У кого-нибудь есть идеи?

В качестве примечания, может быть несколько элементов div, которые имеют классы collapsible btn-collaps text-center valid-files collapsed, и несколько соответствующих элементов div с классом collapse.

1 Ответ

0 голосов
/ 24 октября 2019

Ширина i очень незначительна, поэтому, когда бы вы ни щелкали, клик был на родительском домене. Я считаю, что с реальным значком это не так.

Во-вторых, вы можете использовать функции parent и remove для удаления элемента из домена 

$(".valid-files").on('click', '.remove', function(e) {
  $(this).parent().remove();
  $("#a1").remove();
});
$(".valid-files").on('click', function(e) {});
.remove {
  width: 20px;
  cursor: pointer;
  height: 20px;
  border: 1px solid green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="collapsible btn-collaps text-center valid-files collapsed" aria-expanded="false" data-target="#a1" data-toggle="collapse">Div Content
  <i class="fa fa-trash fa-lg float-left remove" aria-hidden="true">test.txt</i>
</div>


<div class="collapse" id="a1">
  <ul class="list-group">
    <li class="list-group-item">Sub value</li>
    <li class="list-group-item">sub value 2</li>
    <li class="list-group-item">sub value 3</li>
  </ul>
</div>
...