Удаление изображения OnClick в JavaScript - Не работает

Question

Я следующий JS код

var page = '<div class="row delete_contact"> 
       <div class="col-xs-6 contact_item> 
       <label class="control-label col-xs-2" for="id">ID:</label> 
       <div class="controls col-xs-3"> 
       <input class="form-control id" name="id" value="' + id +'"> 
       </div> 
       <a href="javascript:void(0)" class="delete_contact_details control-label"> 
        <span class="delete_contact_details control-label col-xs-1 glyphicon glyphicon-trash"> 
        </span> 
       </a> 
      </div> 
      </div>'; 

, когда мы нажимаем на «удалить» файл, он должен удалить всю строку (дел). Я пробовал при загрузке страницы.

$(function() { 
    $('.delete_contact_details').on("click", function() { 
     $(this).closest('.delete_contact').remove(); 
    }); 
}); 

Но он не вызывает приведенный ниже код. Кто-нибудь, пожалуйста, помогите!

Answer 1

В настоящее время то, что вы используете, называется «прямой» привязкой, которая будет прикрепляться только к элементу, который существует на странице, когда ваш код делает вызов привязки события.

Возможно, вы являетесь динамически генерирующими элементами, используйте Event Delegation с использованием метода делегированных событий .on().

$(function() { 
    $(document).on("click", '.delete_contact_details', function() { 
     $(this).closest('.delete_contact').remove(); 
    }); 
}); 

На месте document вы должны использовать ближайший статический контейнер.

Answer 2

Try:

$(document).ready(function() { 
    $('.delete_contact_details').click(function() { 
     $(this).closest('.delete_contact').remove(); 
    }); 
});