Почему мой селектор не находит мой класс?

Question

Моя цель - удалить изображение, нажав его.

Я это Js:

$('.imageSelected').on('click', function (event) 
    { 
     console.log('ok'); 
     $this.remove(); 
    }); 

И этот HTML:

<li class="imageSelected"> 
    <a href="#"> 
    <div class="img-container" style="background-image:url({{ asset('bundles/mybundle/images/neige.jpg') }});"> 
    <div></div> 
    </div> 
    </a> 
</li> 

Но он никогда не входит в мои JS, есть идея, почему?

Answer 1

Я думаю, что ваши элементы генерируются динамически. Возможно, вам понадобится делегирование событий. Попробуйте следующее.

$(document).on('click', '.imageSelected', function() { 
    $(this).remove(); 
}); 

Answer 2

Чтобы получить элемент в данный момент, вы должны использовать $(this) или this.

$(function(){ 

    $('.imageSelected').on('click', function (event){ 
     $(this).remove(); 
     // or this.remove(); 
    }); 

}); 

Here - рабочий образец.

При написании кода jQuery значение переменной this или $(this) изменится в зависимости от контекста/области вашего кода. Поэтому всегда полезно назначить эту локальную переменную и использовать ее для дальнейших действий.

Пример.

$(function(){ 

    $('.imageSelected').on('click', function (event){ 
     var _this=$(this); 
     //Use _this as needed 
     _this.css({ color : 'red' }); 

     $.post("UrlToDelete", { id :"someIdFromCurrentElement",function(res) { 
       _this.fadeOut(100,function(){ 
        _this.remove(); 
       }); 
     }); 

    }); 

}); 

Answer 3

В настоящее время определено здесь, то $this новая переменная, которая не определена. Вы должны использовать this для перехода к текущему элементу. Итак, если вы хотите использовать jQuery-функции на них, вы можете обернуть его, как $(this).

Ваше решение будет:

$('.imageSelected').on('click', function(event) { 
    console.log('ok'); 
    $(this).remove(); 
}); 

Answer 4

С учетом вашего кода, который имеет ошибку javascript, которая не позволяет отображать предупреждение или запускать jquery дальше. Однако проблема в вашем коде $ эта вместо правильной формы использования здесь $ (this), которая решает проблему. Я добавил модифицированный код в скрипку, поэтому взгляните на свой код здесь.

*https://jsfiddle.net/raghucse2010/c4jjzhvw/7/*