Removal of element



  • Implemented js blocs (naturally not retained) and as advised here (Doofy) off events pointer-events:none; but with help after Created the button on which the block has to be removed, but any code leads to a failure, help solve the code:

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <title></title>
            <meta charset="UTF-8">
            <style>
               #createJavaScript{
                   width:300px;
                   height:200px;
                   background:#cc0000;
                   float:left;
                   margin:2px;
                   position:relative;
                   pointer-events:none;
                   padding:5px;
               }
               #createJavaScript:after{
                   content:"Удалить";
                   display:block;
                   position:absolute;
                   right:5px;
                   top:5px;
                   color:#fff;
                   pointer-events:all;
                   cursor:pointer;
               }
               #createJavaScript:hover:after{
                   content:"Удалить блок";
               }
               #elem{
                   position:absolute;
                   top:10px;
                   left:20px;
               }
               .myButton{
                   width:100%;
                   height:40px;
                   margin:20px 0;
                   border:1px solid #cc0000;
                   position:relative;
               }
            </style>
        </head>
        <body>
    
    &lt;div class="myButton"&gt;
       &lt;button id="elem" type="button " onclick="myFunction()"&gt;Создать блок&lt;/button&gt;
    &lt;/div&gt;
    
       &lt;script&gt;
    
            elem.onclick = function(myFunction) { 
                  var oDiv = document.createElement("DIV");
                    oDiv.id = "createJavaScript";
                    var oText = document.createTextNode("Блок создан через JavaScript");
                    oDiv.appendChild(oText);
                    document.body.appendChild(oDiv);
            };
            &lt;/script&gt;
    

    </body>
    </html>

    100 per cent worker code, how to dispose of the js (not jquery) click on its after to javascript?



  • Try as usual: put the listener on the newly created element:

    var count = 1;
    elem.onclick = function(myFunction) {
      var oDiv = document.createElement("DIV");
      oDiv.id = "createJavaScript_"+count;
      oDiv.className = "createJavaScriptClass";
      var oText = document.createTextNode("Блок создан через JavaScript" + count);
      oDiv.appendChild(oText);
      document.body.appendChild(oDiv);
    

    oDiv.addEventListener('click', function(e) {
    document.body.removeChild(this);
    });

    count++;
    };

    .createJavaScriptClass {
    width: 300px;
    height: 200px;
    background: #cc0000;
    float: left;
    margin: 2px;
    position: relative;
    pointer-events: none;
    padding: 5px;
    }
    .createJavaScriptClass:after {
    content: "Удалить";
    display: block;
    position: absolute;
    right: 5px;
    top: 5px;
    color: #fff;
    pointer-events: all;
    cursor: pointer;
    }
    .createJavaScriptClass:hover:after {
    content: "Удалить блок";
    }
    #elem {
    position: absolute;
    top: 10px;
    left: 20px;
    }
    .myButton {
    width: 100%;
    height: 40px;
    margin: 20px 0;
    border: 1px solid #cc0000;
    position: relative;
    }
    <div class="myButton">
    <button id="elem" type="button " onclick="myFunction()">Создать блок</button>
    </div>

    It's gonna have to end up with the element that was added. In this example, document.body♪ Accordingly, if you add the element to another location, it would then be necessary to indicate it as the object from which to remove.


Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2