Removing elements by class name?
Use Element.remove()
Remove single element
document.querySelector("#remove").remove();
Remove multiple elements
document.querySelectorAll(".remove").forEach(el => el.remove());
If you want a handy reusable function:
const remove = (sel) => document.querySelectorAll(sel).forEach(el => el.remove());
// Use like:
remove(".remove");
remove("#remove-me");
<p class="remove">REMOVE ME</p>
<p>KEEP ME</p>
<p class="remove">REMOVE ME</p>
<p id="remove-me">REMOVE ME</p>
If you prefer not to use JQuery:
function removeElementsByClass(className){
const elements = document.getElementsByClassName(className);
while(elements.length > 0){
elements[0].parentNode.removeChild(elements[0]);
}
}
Using jQuery (which you really could be using in this case, I think), you could do this like so:
$('.column').remove();
Otherwise, you're going to need to use the parent of each element to remove it:
element.parentNode.removeChild(element);