Как удалить определенный элемент li в jQuery

Question

Я новичок в jQuery, и у меня возникли проблемы с удалением определенного элемента li, когда вы нажимаете на X в div. Вместо того, чтобы удалять объект рядом с X, он просто удаляет все элементы li. Может кто-нибудь, пожалуйста, скажите мне, что я делаю неправильно? Благодарю.

$(function() { 
    $("#btn2").click(function() { 
    var toAdd = $("#listItem").val(); 
    $("ol").append("<li>" + toAdd + "</li>"); 
    $('ol').append('<div> X </div>') 
    }); 

    $("#listItem").keydown(function(e) { 
    if (e.which === 13) { 
     e.preventDefault(); // Don't submit the form 
     $("ol").append("<li>" + this.value + "</li>"); // append this.value 
     this.value = ""; // reset the value field 
    } 
    }); 
}); 

$(document).on('dblclick', 'li', function() { 
    $(this).css("text-decoration", "line-through");; 
}); 

$(document).on('click', ' div', function() { 
    $('li').toggleClass('strike').fadeOut('slow'); 
}); 

Answer 1

Вы используете селектор запроса для обнаружения HTML элементов по имени тега li. Это не уникальный селектор, поэтому он возвращает все элементы, соответствующие запросу.

В контексте события click ключевое слово this будет ссылаться на то, что было нажато. Вы можете использовать его для выбора конкретного элемента, если знаете структуру html. Я не уверен в вашем вопросе, как выглядит ваш html, но если бы это было так, вы могли бы использовать этот код. Обратите внимание, что вы можете передать второй параметр в fadeOut как функцию обратного вызова, которая будет запущена после ее завершения, если вы хотите удалить li из DOM, а не просто скрыть его.

HTML

<ul> 
    <li>text<div>X</div></li> 
</ul> 

JavaScript

$(document).on('click', ' div', function() { 
    $(this).closest('li').toggleClass('strike').fadeOut('slow', function() { $(this).remove(); }); 
}); 

Answer 2

Ваш селектор JQuery выбирает все li элементы на странице.

Необходимо идентифицировать элемент, который был нажат.

Взгляните на этот пример:

https://jsfiddle.net/La7eh5Lu/

Он показывает, как вы можете прикрепить обработчик события на определенном DOM элемента. Вы можете использовать это, чтобы передать событие с точным элементом li, который был нажат, а затем использовать эту информацию для выполнения любых действий, которые вы хотите.

Надеюсь, это поможет.

Answer 3

$(document).on('click', ' div', function() { 
     $(this).parent().find('li').toggleClass('strike').fadeOut('slow'); 
}); 

Answer 4

Try:

$(document).on('click', ' div', function() { 
    $(this).prev('li').toggleClass('strike').fadeOut('slow'); 
}); 

Это должно удалить ближайший предыдущий родственный в DIV с X в нем.

Answer 5

Если вы хотите удалить с помощью fade, у вас должно быть fadeOut(), а затем remove() элемент, иначе он будет скрыт.

$(this).closest('li').fadeOut('slow', function(){ 
    $(this).remove(); 
    }); 

Проверить скрипку https://jsfiddle.net/bLsyx98e/2/

Answer 6

Не знаю, что у вас есть HTML, но надеюсь, что это может помочь вам немного

$("#list a.clear").click(function() { 
 
    $(this).parent().remove(); 
 
    return false; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 

 

 
<ul id="list"> 
 
    <li><a href="#" class="clear">one</a></li> 
 
    <li><a href="#" class="clear">two</a><h/li> 
 
    <li><a href="#" class="clear">three</a></li> 
 
</ul>

Answer 7

$(function() { 
 
    $("#btn2").click(function() { 
 
    var toAdd = $("#listItem").val(); 
 
    $("ol").append("<li>" + toAdd + "</li>"); 
 
    $('ol').append('<div class="remove"> X </div>') 
 
    }); 
 

 
    $("#listItem").keydown(function(e) { 
 
    if (e.which === 13) { 
 
     e.preventDefault(); // Don't submit the form 
 
     $("ol").append("<li>" + this.value + "</li>"); // append this.value 
 
     this.value = ""; // reset the value field 
 
    } 
 
    }); 
 
}); 
 

 
$(document).on('dblclick', 'li', function() { 
 
    $(this).css("text-decoration", "line-through");; 
 
}); 
 

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ol> 
 
</ol> 
 

 
<input type="text" id="listItem"> 
 
<button id="btn2">Add</button>