从JavaScript删除HTML李和文本

我从我的JavaScript添加HTML删除按钮与文本。我想要删除li和文本。从JavaScript删除HTML李和文本

我相信我没有正确地找到李项目将其删除。

任何帮助表示赞赏！

$("#add_btn").click(function() { 

    var job = $("#add_task").val().trim(); 

    if (job.length != 0) { 
     $("#theList").append(
      '<li>' + '<button id="remove_btn">Remove</button>' + job + '</li>' 
      ); 
    } else { 
     window.alert("Don't add blank job"); 
    } 
}); 

$("#remove_btn").click(function() { 
    //intended to remove li and text... 
    $(this).next().remove(); //this is not working 
});

下面是HTML：

"http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>To Do List</title> 

    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 
    <script src="toDoList.js"></script> 

</head> 
<body> 
    <h1>To Do List</h1> 

    <label for="add_task">Add Task:</label> 
    <input type="text" id="add_task" name="add_task"> 
    <br> 

    <button id="add_btn"> 
     Add the task 
    </button> 

    <br> 
    <br> 
    <br> 

    <h2>My To Do List</h2> 
    <ol id="theList"> 
    </ol> 
</body> 
</html>

来源

2015-12-05 Eli Feder

请发表您的HTML以及。 – jrummell

@ jrummell和另外两个，不需要。 –

不要重复场所使用id。我有一些修改更新代码：

$("#add_btn").click(function() { 
    var job = $("#add_task").val().trim(); 
    if (job.length != 0) { 
    $("#theList").append(
     //----------------v---v: Change ID to Class. You are repeating.   ««««« 
     '<li>' + '<button class="remove_btn">Remove</button>' + job + '</li>' 
    ); 
    } else { 
    window.alert("Don't add blank job"); 
    } 
}); 

// Delegate the event.               ««««« 
$("#theList").on("click", ".remove_btn", function() { 
    //intended to remove li and text... 
    // Change to closest as the button is inside the `<li>`      ««««« 
    $(this).closest("li").remove(); // this will work 
});

片段

$(function() { 
 
    $("#add_btn").click(function() { 
 
    var job = $("#add_task").val().trim(); 
 
    if (job.length != 0) { 
 
     $("#theList").append(
 
     //----------------v---v: Change ID to Class. You are repeating. 
 
     '<li>' + '<button class="remove_btn">Remove</button>' + job + '</li>' 
 
    ); 
 
    } else { 
 
     window.alert("Don't add blank job"); 
 
    } 
 
    }); 
 

 
    // Delegate the event. 
 
    $("#theList").on("click", ".remove_btn", function() { 
 
    //intended to remove li and text... 
 
    // Change to closest as the button is inside the `<li>` 
 
    $(this).closest("li").remove(); // this will work 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<h1>To Do List</h1> 
 

 
<label for="add_task">Add Task:</label> 
 
<input type="text" id="add_task" name="add_task"> 
 
<br> 
 

 
<button id="add_btn"> 
 
    Add the task 
 
</button> 
 

 
<br> 
 
<br> 
 
<br> 
 

 
<h2>My To Do List</h2> 
 
<ol id="theList"> 
 
</ol>

来源

2015-12-05 23:43:03

使用评论：'// ---------------- v --- v：'很聪明。 – zer00ne

谢谢@ zer00ne！ '：D' –

从JavaScript删除HTML李和文本

回答

相关问题