html - 为什么 Jquery 删除和淡出不起作用？

Question

index.html：https : //hastebin.com/eduyuhiwic.xml main.css：https ://hastebin.com/qatumixuho.css

这里不工作（index.html（28:30））

$(".todo-liste").click(function(){
        $(this).parent(".todo-listeEleman").fadeOut(300);
});

标签： htmljquerycss

Answer 1

由于您附加todo-listeEleman到todo-listethen 您需要使用.find()，而不是.parent()因为元素是todo-liste.

$(this).find(".todo-listeEleman").fadeOut(300);

演示

$(document).ready(function() {
  $(".todo-ekle").click(function() {
    $(".todo-liste").append("<li class = 'todo-listeEleman'>" + $(".todo-hedef").val() + "</li>")
  });
  $(".todo-liste").click(function() {
    $(this).find(".todo-listeEleman").fadeOut(300);
  });
});

<title>TO-DO LIST APP</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">

<div class="root-div" id="root-div">
  <h1 class="todo-baslik">TODO LIST</h1>
  <input type="text" name="hedef" placeholder="Lütfen hedefini yazın..." class="todo-hedef" id="todo-hedef">
  <button class="todo-ekle" id="todo-ekle"> +</button>
  <br>
  <ul class="todo-liste" id="todo-liste">

  </ul>
</div>