Question

我试图在JQuery中创建一个简单的ToDo列表，但我遇到了一个问题。我做了函数＆＃39; deleteListItem＆＃39;我用它来删除我的列表项目：

$(this).parent().remove();

，然后我想在我的列表中添加fadeOut效果，所以我尝试了：

$(this).fadeOut(1000, function(){
    $(this).parent().remove();
})

，但这个fadesOut只是我的删除按钮，所以我尝试了

$(this).parent().fadeOut(1000, function(){
    $(this).parent().remove();
})

这会使我所有的＆＃39;而不仅仅是＆＃39; li＆＃39;元件。这是我的JSBIN，所以你更好地理解我在做什么：http://jsbin.com/ciyufi/edit?html,js,output

Answer 1

在回调处理程序中，this引用<li>。

$(this).parent().fadeOut(1000, function(){
    $(this).remove();
})

Answer 2

// This is where I put my functions

// This function adds items on our list
function addListItem() {
	var text=$('#newText').val();  // val returns any text thats inside input
	$('#todoList').append('<li><input type="checkbox" class="done">'+ text +'<button class="delete">Delete</button></li>');
	$('#newText').val(''); // this is added so that our input deletes previous text when add is clicked
};

// This function deletes items on our list
function deleteListItem() {
	// In order to delete entire list item we have to use parent method > without parent method we would only delete our delete button
	$(this).parent().fadeOut(1000, function(){
		$(this).closest("li").remove();
	})

};

// This function adds checked remark on our item list
function itemDone() { 
	// First we check if our element has textDecoration="line-through"
	// If it has it second line deletes it
	// And our else statement allows as to add it again
	if ($(this).parent().css('textDecoration') == 'line-through') {
		$(this).parent().css('textDecoration', 'none');
	}	else {
		$(this).parent().css('textDecoration', 'line-through');
	}	
}


$ (document).ready(function(){

	$('#add').on('click', addListItem); // This is for button to add text

	// This part enables us to add text on pressing enter key
	$( "#newText" ).keypress(function( event ) {
		if ( event.which == 13) {
			addListItem();
		}
	});

	// $('.delete').on('click', deleteListItem);
	// $('.done').on('click', itemDone);

	// Lines above don't work because we are adding elements after page loads
	// In above lines browser didn't bind functions to our new elements because it didn't see them at the time
	// In order to make it work we add document selector > its not the best solution but i'm not good enough for better 
	// We don't need to do it for #add because its already on page
	$(document).on('click', '.delete', deleteListItem);
	$(document).on('click', '.done', itemDone);





});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>ToDo Lista</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
 
<section class="container">
    <h1>ToDo List</h1>
    <ul id="todoList">
        <li><input type="checkbox" class="done"> Clean House <button class="delete">Delete</button></li>
        <li><input type="checkbox" class="done">Buy Milk <button class="delete">Delete</button></li>
        <input id="newText" type="text" placeholder="Write Your Task"><button id="add">Add</button>
    </ul>
</section>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>

我更喜欢使用closest。 closest只需更改'deleteListItem'函数即可删除删除时最近的li项。

function deleteListItem() {
    // In order to delete entire list item we have to use parent method > without parent method we would only delete our delete button
    $(this).parent().fadeOut(1000, function(){
        $(this).closest("li").remove();
    })

};

JQuery父选择器和淡出

2 个答案: