正確使用javascript實現創建和刪除功能

我能夠使用javascript創建div。但是，無法刪除我之前創建的div。只有在回傳後，我才能刪除該div。實際上，在創建div之後，腳本無法找到該div，因爲頁面沒有再次加載。我想要做的是創建一個頁面，我可以添加一個項目並刪除該項目。添加腳本正常工作。卸妝腳本：正確使用javascript實現創建和刪除功能

<script type="text/javascript"> 
    $(function() {    
     $('.remove ,.shop-button-large, .shop-button-add').click(function() {    
      var itemToDelete = $(this).attr("data-id");         
      if (itemToDelete != '') { 
       $.post("/ShoppingBox/RemoveFromBox", { "id": itemToDelete }, 
        function (data) {         
         $("#boxItem-" + itemToDelete + "-" + data.ItemCount).fadeOut(300);       
        }); 
      } 
     }); 
    }); 
</script>

來源

2015-04-21 fivetech

你只是想'.hide（）'從瀏覽器這個元素還是要充分刪除它來自DOM？ –

您是否證實$（「＃boxItem-」+ itemToDelete +「 - 」+ data.ItemCount）返回正確的dom節點？ – Remento

它可能是兩者都有，我在追加後無法訪問該元素 – fivetech

被渲染的DOM節點之前的去除click處理程序已完成。它需要的內幕$（函數（）{...}

http://plnkr.co/edit/IhtyH6ampodXICPBv6Fq?p=preview

<!DOCTYPE html> 
<html> 

<head> 
    <script data-require="[email protected]" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script> 
    <script> 
    $(function() { 

     $("#create").click(function() { 
     var createDiv = document.createElement("div"); 
     createDiv.id = "myDiv"; 
     createDiv.style.margin = "0 auto"; 
     createDiv.style.width = "600px"; 
     createDiv.style.height = "600px"; 
     createDiv.style.backgroundColor = "red"; 
     document.getElementById("myBody").appendChild(createDiv); 
     }); 


     $("#remove").click(function() { 
     console.log('remove', $("#myDiv")); 
     $("#myDiv").fadeOut(300); 

     }); 

    }); 
    </script> 


</head> 

<body id="myBody"> 
    <a href="#" id="create">Create</a> 
    <a href="#" id="remove">Remove</a> 
</body> 

</html>

來源

2015-04-21 01:00:48 Remento

I當我使用javascript創建一個id =「remove」的超鏈接時，單擊觸發器對超鏈接不起作用 – fivetech

這是因爲它可能（無意）在$（function（） {...}）;這意味着JS代碼去尋找一個id爲「remove」的DOM節點，但它還沒有被添加到頁面中。將腳本標記移動到頁面底部也可以解決問題。 – Remento

In order to clarify, I have prepared a simple code: 

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>  
<script src="js/jquery-2.1.3.intellisense.js"></script> 
<script src="js/jquery-2.1.3.min.js"></script> 
<script src="js/jquery-2.1.3.js"></script> 
<script src="js/jquery-ui.js"></script> 
<script> 
    $(function() { 
     $("#create").click(function() { 

      var createDiv = document.createElement("div"); 
      createDiv.id ="myDiv"; 
      createDiv.style.margin = "0 auto"; 
      createDiv.style.width = "600px"; 
      createDiv.style.height = "600px"; 
      createDiv.style.backgroundColor = "red"; 
      document.getElementById("myBody").appendChild(createDiv); 
     }); 

    }); 
    $("#remove").click(function() { 

     $("#myDiv").fadeOut(300); 

    }); 


</script> 
<title></title> 
</head> 
<body id="myBody"> 
<a href="#" id="create">Create</a> 
<a href="#" id="remove">Remove</a> 
</body> 
</html>

來源

2015-04-21 00:50:18 fivetech

正確使用javascript實現創建和刪除功能

回答

相關問題