香草js删除id框

我知道该怎么做with JQuery但我想删除一个带有香草JS的onClick元素（x）的框。根据to this我需要删除子元素。至于这是我的尝试：香草js删除id框

function remove() { 
 
    var element = document.getElementById("box"); 
 
    element.parentNode.removeChild(element); 
 
}

#box { 
 
    background-color: lightgrey; 
 
    color: white; 
 
    width: 20em; 
 
    height: 20em; 
 
    border: 25px solid green; 
 
    padding: 25px; 
 
    margin: 25px; 
 
} 
 
.remover { 
 
    font-size: 10em; 
 
    align 
 
}

<div id="box"> 
 
    <div id="removeBox" onclick="remove()"> 
 
    <span class="remover">x</span> 
 
    </div> 
 
</div>

你介意帮我去除整盒只需点击“X”？ jsfiddle

谢谢你这么多

来源

2017-10-17 akpackage

有什么不好的代码，该代码段似乎工作，因为它是...？ – Teemu

该片段已经在香草JS，并正常工作。有什么问题？ –

请在使用JSFiddle时，JS部分的水印不仅仅是水印。点击它并选择'Load-Type'为'No Wrap - In body'。 – Rajesh

不要使用onclick，这是不好的做法，这是为什么：

混合代码和标记
这样写的代码经过EVAL
在全局范围内运行，而直接写入功能在用户范围内运行

使用事件样结合：

document.getElementById("box").addEventListener('click', function() { 
    var element = document.getElementById("box"); 
    element.parentNode.removeChild(element); 
});

这是一个完整的小提琴： fiddle

来源

2017-10-17 11:02:18 DanteTheSmith

虽然你的建议是正确的，但这是一个优化，而不是OP要求的解决方案。此外，这是重复的。这是一个不好的做法来回答一个骗局。 – Rajesh

由于他的代码已经工作，所以没有解决方案。但是，我看到所有的问题都出现了，人们需要知道它做事的方式。活动很干净，把所有东西放在一个地方，并且不要让全球变得模糊 – DanteTheSmith

请介意语气。虽然我不介意，但它仍然不专业，不适合SO。也就是说，如果OP的代码正在工作并且没有问题，那么您的答案地址是优化，而不是解决方案。此外，避免HTML上的处理程序的更重要的原因是它使您的代码变得脆弱。由于它在页面上可见，任何人都可以在控制台中覆盖此功能并破坏您的网站。他们也可以调试和窃取你的代码。 – Rajesh

香草js删除id框

回答

相关问题