CODEWITHSUNDEEP
javascripthtmlcss
Pow
Pow

Reputation: 25

How to remove a div off the page using JavaScript

½I'm trying to make a close button for a dynamically created div.

At the moment the below code can create a div repeated, but I cannot seem to get the div close button to work. I'm trying to make it so even if multiple divs are open, the close button works on each.

If there is a way to do via jQuery please let me know as I couldn't get it to work.

<html>
    <title>Test Platform</title>

    <head>
        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    </head>

    <style>
        body {
          margin: 0 0;
        }
        #container {
          border: 1px solid blue;
          white-space: nowrap;
          overflow: auto;
            font-size: 0;
        }

        #container > * {
          font-size: 8px;
          font-family: 'Open Sans', sans-serif;
        }

        #headerbar {
          font-size: 30px;
          color: white;
          padding-left: 10px;
          border: 1px solid darkgrey;
          height: 50px;
          background-color: darkslateblue;
        }
        #sidebar {
          display: inline-block;
          color: black;
          border: 1px solid darkgrey;
          width: 50px;
          height: 100vh;
          vertical-align: top;
          background-color: lightgrey;
          text-align: center;
          padding-top: 10px;
        }
        .content {
          display: inline-block;
          width: 200px;
          height: 100vh;
          border: 1px solid lightslategrey;
          margin: 0 1px 0 0;
          vertical-align: top;
          background-color: lightsteelblue;
        }
        .close {
            display: inline-block;
            padding: 2px 5px;
            background: #ededed;
            float: right;
        }
        .close:hover {
            float: right;
            display: inline-block;
            padding: 2px 5px;
            background: #ccc;
            color: #fff;
        }
    </style>

    <body>
        <div id='container'>
            <div id='headerbar'>Header Div</div>
            <div id='sidebar'> <input type="button" value="O" id="calculate" />
                <br/><br/>
                <br/><br/>
            </div>
        </div>

        <script type='text/javascript'>
            window.onload = function(){
                document.getElementById('close').onclick = function(){
                    this.parentNode.parentNode.parentNode
                    .removeChild(this.parentNode.parentNode);
                    return false;
                };
            };
        </script>

        <script>
            function makeResponseBox() {
                document.getElementById("calculate").onclick = function()
                {
                    var responseBox = document.createElement("DIV"); //create <div>
                    var spanclose = document.createElement("span");
                    var spantext = document.createTextNode("X");
                    spanclose.appendChild(spantext);
                    spanclose.setAttribute("class", "close" );
                    responseBox.setAttribute("class", "content" );
                    responseBox.appendChild(spanclose);
                    document.getElementById('container').appendChild(responseBox);
                }
            } // Close function (makeResponseBox)
            window.onload = makeResponseBox;
        </script>
    </body>
</html>

Upvotes: 0

Views: 557

Answers (8)

Ying Yi
Ying Yi

Reputation: 782

You can use this code:

$("#container").on("click",".close",function(){
    $(this).closest(".content").hide()
})

This is the demo code:

<html>
    <title>Test Platform</title>

    <head>
        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   

    <style>
        body {
            margin: 0 0;
        }
        #container {
            border: 1px solid blue;
            white-space: nowrap;
            overflow: auto;
            font-size: 0;
        }

        #container > * {
            font-size: 8px;
            font-family: 'Open Sans', sans-serif;
        }

        #headerbar {
            font-size: 30px;
            color: white;
            padding-left: 10px;
            border: 1px solid darkgrey;
            height: 50px;
            background-color: darkslateblue;
        }
        #sidebar {
            display: inline-block;
            color: black;
            border: 1px solid darkgrey;
            width: 50px;
            height: 100vh;
            vertical-align: top;
            background-color: lightgrey;
            text-align: center;
            padding-top: 10px;
        }
        .content {
            display: inline-block;
            width: 200px;
            height: 100vh;
            border: 1px solid lightslategrey;
            margin: 0 1px 0 0;
            vertical-align: top;
            background-color: lightsteelblue;
        }
        .close {
            display: inline-block;
            padding: 2px 5px;
            background: #ededed;
            float: right;
        }
        .close:hover {
            float: right;
            display: inline-block;
            padding: 2px 5px;
            background: #ccc;
            color: #fff;
        }
    </style>
    </head>
    <body>
        <div id='container'>
            <div id='headerbar'>Header Div</div>
            <div id='sidebar'> <input type="button" value="O" id="calculate" />
                <br/><br/>
                <br/><br/>
            </div>
        </div>

        <script type='text/javascript'>
            $("#container").on("click",".close",function(){
                $(this).closest(".content").hide()
            })
        </script>

        <script>
            function makeResponseBox() {
                document.getElementById("calculate").onclick = function()
                {
                    var responseBox = document.createElement("DIV"); //create <div>
                    var spanclose = document.createElement("span");
                    var spantext = document.createTextNode("X");
                    spanclose.appendChild(spantext);
                    spanclose.setAttribute("class", "close" );
                    responseBox.setAttribute("class", "content" );
                    responseBox.appendChild(spanclose);
                    document.getElementById('container').appendChild(responseBox);
                }
            } // Close function (makeResponseBox)
            window.onload = makeResponseBox;
        </script>
    </body>
</html>

Upvotes: 0

Lal
Lal

Reputation: 14810

See this fiddle

Below is the updated JavaScript code.

function add() {
    var responseBox = document.createElement("DIV"); //create <div>
    var spanclose = document.createElement("span");
    var spantext = document.createTextNode("X");
    spanclose.appendChild(spantext);
    spanclose.setAttribute("class", "close");
    responseBox.setAttribute("class", "content");
    responseBox.setAttribute("onclick", "remove(this)");
    responseBox.appendChild(spanclose);
    document.getElementById('container').appendChild(responseBox);
}

function remove(elt) {
    elt.parentNode.removeChild(elt);
}

Upvotes: 0

Alan
Alan

Reputation: 56

$("body").on("click", ".content .close", function() {
    $(this).parent().remove();
});

Your code to remove the dynamically created div almost worked, but it was looking for the id close instead of class and wouldn't work since the event would be added before the content is added to the DOM.

To solve that we can use event delegation in jQuery as shown above. We attach the click to the body instead of the close button and only make it trigger when the close button is clicked.

Upvotes: 1

Nalin Aggarwal
Nalin Aggarwal

Reputation: 888

The below code will help you with that:

JavaScript:

function makeResponseBox() {
    document.getElementById("calculate").onclick = function()
    {
        var responseBox = document.createElement("DIV"); //create <div>
        var spanclose = document.createElement("span");
        var spantext = document.createTextNode("X");
        spanclose.appendChild(spantext);
        spanclose.setAttribute("class", "close" );
        spanclose.setAttribute("onclick", "removeDiv(this)" );
        responseBox.setAttribute("class", "content" );
        responseBox.appendChild(spanclose);
        document.getElementById('container').appendChild(responseBox);
    }
} // Close function (makeResponseBox)

window.onload = makeResponseBox;

function removeDiv(elem){
    elem.parentElement.remove()
}

jQuery

function makeResponseBox() {
    document.getElementById("calculate").onclick = function()
    {
        var responseBox = document.createElement("DIV"); //create <div>
        var spanclose = document.createElement("span");
        var spantext = document.createTextNode("X");
        spanclose.appendChild(spantext);
        spanclose.setAttribute("class", "close" );
        responseBox.setAttribute("class", "content" );
        responseBox.appendChild(spanclose);
        document.getElementById('container').appendChild(responseBox);
    }
} // Close function (makeResponseBox)

window.onload = makeResponseBox;
$( "#container" ).on( "click",".close", function() {
    $(this).parent().remove();
});

Upvotes: 0

Cristian Torres
Cristian Torres

Reputation: 206

This would be your function using jQuery. Note that you still have to add the return value to the DOM.

function makeResponseBox() {
    $close = $('<div>').addClass('close');
    $window = $('<div>').addClass('window');
    $window.append($close);
    $close.on('click', function(e){
        e.preventDefault();
        // removes the enclosing div.window
        $(e.target).closest('.window').remove();
        return false;
    });
    return $window;
}

https://jsfiddle.net/p96Lq65s/17/

Upvotes: 1

Parveen Sachdeva
Parveen Sachdeva

Reputation: 1019

You can use this code:

<script type="text/javascript">
    $(document).ready(function() {
        $("body").on('click', '.close', function(e) {
            $(e.target.parentElement).remove();
        });
    });
</script>

Upvotes: 0

Jonas Wilms
Jonas Wilms

Reputation: 138287

Add this to your makeResponseBox function:

spanclose.onclick=function(){
this.parentNode.removeChild(this);
}

Upvotes: 0

knutesten
knutesten

Reputation: 594

When you run the function to add close functionality to all elements with class .close there are no such elements. Because you haven't created any divs yet. You should add the onclick listener when you create new divs.

<html>
<title>Test Platform</title>

<head>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

<style>
  body {
    margin: 0 0;
  }
  #container {
    border: 1px solid blue;
    white-space: nowrap;
    overflow: auto;
    font-size: 0;
  }
  #container > * {
    font-size: 8px;
    font-family: 'Open Sans', sans-serif;
  }
  #headerbar {
    font-size: 30px;
    color: white;
    padding-left: 10px;
    border: 1px solid darkgrey;
    height: 50px;
    background-color: darkslateblue;
  }
  #sidebar {
    display: inline-block;
    color: black;
    border: 1px solid darkgrey;
    width: 50px;
    height: 100vh;
    vertical-align: top;
    background-color: lightgrey;
    text-align: center;
    padding-top: 10px;
  }
  .content {
    display: inline-block;
    width: 200px;
    height: 100vh;
    border: 1px solid lightslategrey;
    margin: 0 1px 0 0;
    vertical-align: top;
    background-color: lightsteelblue;
  }
  .close {
    display: inline-block;
    padding: 2px 5px;
    background: #ededed;
    float: right;
  }
  .close:hover {
    float: right;
    display: inline-block;
    padding: 2px 5px;
    background: #ccc;
    color: #fff;
  }
</style>

<body>

  <div id='container'>
    <div id='headerbar'>Header Div</div>
    <div id='sidebar'>
      <input type="button" value="O" id="calculate" />
      <br />
      <br />
      <br />
      <br />
    </div>

  </div>

  <script>
    function makeResponseBox() {
        document.getElementById("calculate").onclick = function() {
          var responseBox = document.createElement("DIV"); //create <div>
          var spanclose = document.createElement("span");
          var spantext = document.createTextNode("X");
          spanclose.appendChild(spantext);
          spanclose.setAttribute("class", "close");
          spanclose.onclick = function() {
            this.parentNode.parentNode
              .removeChild(this.parentNode);
            return false;
          };
          responseBox.setAttribute("class", "content");
          responseBox.appendChild(spanclose);
          document.getElementById('container').appendChild(responseBox);


        }
      } //close function (makeResponseBox)
    window.onload = makeResponseBox;
  </script>

</body>

</html>

Upvotes: 0

Related Questions