Question

我是jQuery的新用户，当您点击div中的li时，我无法删除某个X元素。它不会删除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

您的jQuery选择器正在选择页面上的所有li元素。您需要识别被单击的元素。

看一下这个例子：

https://jsfiddle.net/La7eh5Lu/

它显示了如何将处理程序附加到特定DOM元素上的事件。您可以使用它来抛出具有已单击的确切li元素的事件，然后使用该信息执行您想要的任何操作。

Answer 2

尝试：

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

这应该删除div中最近的前一个兄弟，其中包含X.

Answer 3

如果你想用淡入淡出删除，你必须fadeOut()然后remove()元素，否则它将被隐藏。

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

检查小提琴https://jsfiddle.net/bLsyx98e/2/

Answer 4

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

Answer 5

您正在使用查询选择器按标记名称li检测html元素。这不是唯一的选择器，因此它将返回与查询匹配的所有元素。

在点击事件的上下文中，this关键字将引用已点击的内容。如果您知道html结构，可以使用它来选择特定元素。我不确定你的问题你的html是什么样的，但是如果它如下，你可以使用这个代码。请注意，如果要从DOM中删除fadeOut而不是隐藏它，可以将第二个参数传递给li作为回调函数，一旦它完成就会被触发。

<强> 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 6

不知道你有什么HTML，但希望这可以帮助你一点

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 7

＆＃13;

$(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();
});

＆＃13;

<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>

＆＃13;

如何删除jQuery中的特定li元素

7 个答案: