Removal of element
-
Implemented js blocs (naturally not retained) and as advised here (Doofy) off events
pointer-events:none;but with helpafterCreated 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><div class="myButton"> <button id="elem" type="button " onclick="myFunction()">Создать блок</button> </div> <script> elem.onclick = function(myFunction) { var oDiv = document.createElement("DIV"); oDiv.id = "createJavaScript"; var oText = document.createTextNode("Блок создан через JavaScript"); oDiv.appendChild(oText); document.body.appendChild(oDiv); }; </script></body>
</html>100 per cent worker code, how to dispose of the js (not jquery) click on its
afterto 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.
