Implemeting Create and Delete function properly using javascript

Question

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>

Do you just want to .hide() this element from the browser or do you want to fully remove it from the DOM? — jeanpier_re
– jeanpier_re, Commented Apr 21, 2015 at 0:32
Have you confirmed that $("#boxItem-" + itemToDelete + "-" + data.ItemCount) returns the correct dom node? — Remento
– Remento, Commented Apr 21, 2015 at 0:44
It could be both. I cannot access that element after appending. — fivetech
– fivetech, Commented Apr 21, 2015 at 0:44

Remento · Accepted Answer · 2015-04-21 01:00:48Z

1

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>

answered Apr 21, 2015 at 1:00

Remento

9274 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

fivetech Over a year ago

I have one more question. When I create a hyperlink with id = "remove" using javascript, click trigger does not work for that hyperlink.

Remento Over a year ago

that is because it was (perhaps inadvertently) done outside of the $(function() { ... }); This means that the JS code went to look for a DOM node with id "remove" but it had not yet been added to the page. Moving your script tag to the bottom of the page may also fix the issue.

fivetech · Accepted Answer · 2015-04-21 00:50:18Z

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>

Collectives™ on Stack Overflow

Implemeting Create and Delete function properly using javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related