javascript中的這個對象不起作用

我試過了，但是當點擊十字按鈕時我似乎不能刪除列表。有人可以解釋爲什麼'這個'在這裏不起作用嗎？或者還有其他方法可以知道除了使用'this'對象之外哪個十字按鈕被點擊？javascript中的這個對象不起作用

$(function(){ 
 
\t $("#btn").on("click",function(){ 
 
\t var text = $("#input").val(); 
 
\t if(text==""){ 
 
\t \t alert("please enter a task!"); 
 
\t } 
 
\t else{ 
 
\t var task = $("<li></li>").text(text); 
 
\t $(task).append("<button class= 'rem'>X</button>"); 
 
\t $("#ordered").append(task); 
 
\t } 
 
}); 
 
\t $(".rem").on("click",function(){ 
 
\t \t $(this).hide(1000); 
 
\t }); 
 

 
});

<!DOCTYPE html> 
 
<html lang = "en"> 
 
<head> 
 
\t <title>Javascript Addition</title> 
 
\t <meta charset = "utf-8"> 
 
\t 
 
\t </head> 
 
\t <body> 
 
\t \t <h1>My To-Do List </h1> 
 
\t \t <input id = "input" placeholder ="Add your task Here..."> 
 
\t \t <button id = "btn">clickkk</button> 
 
\t \t <ol id = "ordered"> 
 
\t \t \t </ol> 
 
\t \t <script 
 
    src="https://code.jquery.com/jquery-3.2.1.min.js" 
 
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
 
    crossorigin="anonymous"></script> 
 
    <script src="todo.js"></script> 
 
    </body> 
 
    </html>

來源

2017-07-02 iAmRoot

你可以試試這個

<!DOCTYPE html> 
    <html lang = "en"> 
     <head> 
      <title>Javascript Addition</title> 
      <meta charset = "utf-8"> 
     </head> 
     <body> 
      <h1>My To-Do List </h1> 
      <input id = "input" placeholder ="Add your task Here..."> 
      <button id = "btn">clickkk</button> 
      <ol id = "ordered"></ol> 

     </body> 
     <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
     <script src="todo.js"></script> 
     <script type="text/javascript"> 
     $("#btn").on("click", function() { 
      var text = $("#input").val(); 
      if (text == "") { 
       alert("please enter a task!"); 
      } else { 
       $("#input").val(""); 
       var task = $("<li></li>").text(text); 
       $(task).append("<button class='rem'>X</button>"); 
       $("#ordered").append(task); 
      } 
     }); 

     $("body").delegate('.rem', "click", function() { 
      $(this).parent().hide(); 
     }); 
     </script> 
    </html>

來源

2017-07-02 10:14:22

這裏是你如何隱藏按鈕。取而代之的$(".rem").on("click",function(){，您可以使用$("body").on("click", '.rem', function() {

$(function() { 
 
    $("#btn").on("click", function() { 
 
    var text = $("#input").val(); 
 
    if (text == "") { 
 
     alert("please enter a task!"); 
 
    } else { 
 
     var task = $("<li></li>").text(text); 
 
     $(task).append("<button class='rem'>X</button>"); 
 
     $("#ordered").append(task); 
 
    } 
 
    }); 
 
}); 
 

 
$("body").on("click", '.rem', function() { 
 
    $(this).parent().hide(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1>My To-Do List </h1> 
 
<input id="input" placeholder="Add your task Here..."> 
 
<button id="btn">clickkk</button> 
 
<ol id="ordered"> 
 
</ol>

來源

2017-07-02 08:15:13

使用event delegation。因爲您正在動態添加li。要刪除你需要找到最近的李並隱藏它。

$(function(){ 
 
\t $("#btn").on("click",function(){ 
 
\t var text = $("#input").val(); 
 
\t if(text==""){ 
 
\t \t alert("please enter a task!"); 
 
\t } 
 
\t else{ 
 
\t var task = $("<li></li>").text(text); 
 
\t $(task).append("<button class= 'rem'>X</button>"); 
 
\t $("#ordered").append(task); 
 
\t } 
 
}); 
 
\t $(document).on("click",'.rem',function(){ 
 
\t  $(this).closest('li').hide(); 
 
\t }); 
 

 
});

<!DOCTYPE html> 
 
<html lang = "en"> 
 
<head> 
 
\t <title>Javascript Addition</title> 
 
\t <meta charset = "utf-8"> 
 
\t 
 
\t </head> 
 
\t <body> 
 
\t \t <h1>My To-Do List </h1> 
 
\t \t <input id = "input" placeholder ="Add your task Here..."> 
 
\t \t <button id = "btn">clickkk</button> 
 
\t \t <ol id = "ordered"> 
 
\t \t \t </ol> 
 
\t \t <script 
 
    src="https://code.jquery.com/jquery-3.2.1.min.js" 
 
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
 
    crossorigin="anonymous"></script> 
 
    <script src="todo.js"></script> 
 
    </body> 
 
    </html>

來源

2017-07-02 08:17:05

javascript中的這個對象不起作用

回答

相關問題