CODEWITHSUNDEEP
javascripthtmlajax
fivetech
fivetech

Reputation: 361

Implemeting Create and Delete function properly using javascript

I am able to create a div using javascript. However, not able to remove that div that I created previously. Only after post-back, I can remove that div. Actually after creating div, script cannot find that div because page did not loaded again. What I want to do is to create a page that I am able to add an item and remove that item. Add script works fine. Remover script:

<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>

Upvotes: 1

Views: 69

Answers (2)

Remento
Remento

Reputation: 927

The click handler for the remove was done before the DOM node was rendered. It needs to be insider the $(function() { ... }

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>

Upvotes: 1

fivetech
fivetech

Reputation: 361

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>

Upvotes: 0

Related Questions