Удалить динамически добавленные <li>с помощью onClick из <img>, содержащиеся в

Question

Я использую скрипт из http://webdeveloperplus.com/jquery/ajax-multiple-file-upload-form-using-jquery/ Я изменил onComplete, чтобы добавить ссылку для удаления изображения.В функции remove_me () я хочу: 1. удалить

для файла, по которому щелкнули 2. вызвать PHP-скрипт на сервере через ajax, чтобы удалить файл с сервера, поскольку он уже загружен.

if(response==="success"){
  $('<li></li>').appendTo('#files').html('<img src="./uploads/'+file+'" alt="" /><br />'+file+'<br />Click to Remove<img src="cross.png" onclick="remove_me(\'./uploads/'+file+'\')" />').addClass('success');
} else{
  $('<li></li>').appendTo('#files').text(file).addClass('error');
}

В функции remove_me () я могу легко получить имя изображения, потому что я передаю его через onClick, но я не уверен, как я могу удалить

, который содержит изображение.Имя файла будет передано в функцию PHP через вызов ajax.Я знаю, как это сделать, он просто удаляет , с которым у меня проблемы.

Answer 1

Если вы используете jQuery, вы не должны использовать встроенную привязку событий, например, 'onClick'. Вы можете использовать стандартный способ связывания событий, а именно:

$(function() {
    $('img').click(function() {
        // process here
    })
})

Таким образом, вы можете получить доступ к любому связанному элементу DOM. В вашем случае вы можете получить родителя <li> как $(this).parent() и удалить его с помощью $(this).parent().remove();

ДОБАВЛЕНО: Если вы добавляете эти элементы динамически, вы должны связать события, используя live, например:

$(function() {
    $('img').live('click', function() {
        // process here
    })
})

Answer 2

Я не уверен, что вы показываете здесь, почему это не работает, так как я не вижу функцию remove_me (), но я покажу вам, как это сделать так, как я бы это сделал.

вы можете использовать $ (this) в функции remove_me () следующим образом:

$(this).closest('li').remove();

Это началось бы с того места, где щелкнули, и перейдет к ближайшему тегу li и удалит его.

(darnit два человека только что ответили ... я не собираюсь смотреть ... должен научиться печатать быстрее LOL)

Answer 3

Если изображение является единственным элементом внутри тега LI, вы можете использовать DOM, чтобы удалить parentNode изображения, тем самым удалив LI.

https://developer.mozilla.org/En/DOM/Node.parentNode http://reference.sitepoint.com/javascript/Node/parentNode