Removing elements by class name

Question

I have the below code to find elements with their class name      Get the element by their class name var cur columns   document getElementsByClassName  column        Now remove them  for  var i   0  i  lt  cur columns length  i           I just don t know how to remove them      do I HAVE to reference the parent or something  What s the best way to handle this    Karim79   Here is the JS   var col wrapper   document getElementById  columns   getElementsByTagName  div    var len   col wrapper length   alert len    for  var i   0  i  lt  len  i          if  col wrapper i  className toLowerCase       column             col wrapper i  parentNode removeChild col wrapper i              Here is the HTML    lt div class  columns  id  columns  gt       lt div class  column  gt  lt input type  checkbox  name  col list    value  cows  gt cows lt  div gt       lt div class  column  gt  lt input type  checkbox  name  col list    value  cows  gt cows lt  div gt       lt div class  column  gt  lt input type  checkbox  name  col list    value  cows  gt cows lt  div gt       lt div class  column  gt  lt input type  checkbox  name  col list    value  cows  gt cows lt  div gt       lt div name  columnClear  class  contentClear  id  columnClear  gt  lt  div gt   lt  div gt    Edit  Well ended up just using the jQuery option

User · Answer

This works for me  while  document getElementsByClassName  my-class   0             document getElementsByClassName  my-class   0  remove

User · Answer

const elem  document getElementsByClassName  column    for  let i   elem length  0  lt  i         elem --i  remove       OR  const elem  document getElementsByClassName  column    while  elem length  gt  0       elem 0  remove

User · Answer

It s very simple  one-liner  using ES6 spread operator due document getElementByClassName returns a HTML collection        document getElementsByClassName  dz-preview    map thumb   gt  thumb remove

User · Answer

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

User · Answer

The skipping elements bug in this  code from above   var len   cells length  for var i   0  i  lt  len  i          if cells i  className toLowerCase       column             cells i  parentNode removeChild cells i              can be fixed by just running the loop backwards as follows  so that the temporary array is not needed   var len   cells length  for var i   len-1  i  gt -1  i--        if cells i  className toLowerCase       column             cells i  parentNode removeChild cells i

User · Answer

I prefer using forEach over for while looping  In order to use it s necessary to convert HTMLCollection to Array first   Array from document getElementsByClassName  post-text         forEach element   gt  element remove       Pay attention  it s not necessary the most efficient way  Just much more elegant for me

User · Answer

One line  document querySelectorAll   remove   forEach el   gt  el remove       For example you can do in this page to remove userinfo  document querySelectorAll   user-info   forEach el   gt  el remove

User · Answer

You can use this syntax  node parentNode  For example   someNode   document getElementById  someId    someNode parentNode removeChild someNode

User · Answer

This is how I ve completed a similar task in Pure JavaScript   x000D   x000D  function setup item      document querySelectorAll   column      find all classes named column       forEach  item    gt    item    loop  through each item           addEventListener  click    event    gt    item            add event listener for each item found               remove       remove self - changed node as needed                           setup    x000D   lt div class  columns  id  columns  gt       lt div class  column  gt  lt input type  checkbox  name  col list    value  cows  gt cows1 lt  div gt       lt div class  column  gt  lt input type  checkbox  name  col list    value  cows  gt cows2 lt  div gt       lt div class  column  gt  lt input type  checkbox  name  col list    value  cows  gt cows3 lt  div gt       lt div class  column  gt  lt input type  checkbox  name  col list    value  cows  gt cows4 lt  div gt       lt div name  columnClear  class  contentClear  id  columnClear  gt  lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

Recursive function might solve your problem like below  removeAllByClassName   function  className        function findToRemove             var sets   document getElementsByClassName className           if  sets length  gt  0                sets 0  remove                findToRemove                        findToRemove          removeAllByClassName

User · Answer

Yes  you have to remove from the parent   cur columns i  parentNode removeChild cur columns i

User · Answer

Brett - are you aware that getElementyByClassName support from IE 5 5 to 8 is not there according to quirksmode   You would be better off following this pattern if you care about cross-browser compatibility    Get container element by ID  Get needed child elements by tag name  Iterate over children  test for matching className property  elements i  parentNode removeChild elements i   like the other guys said    Quick example   var cells   document getElementById  myTable   getElementsByTagName  td    var len   cells length  for var i   0  i  lt  len  i          if cells i  className toLowerCase       column             cells i  parentNode removeChild cells i              Here s a quick demo   EDIT  Here is the fixed version  specific to your markup   var col wrapper   document getElementById  columns   getElementsByTagName  div     var elementsToRemove       for  var i   0  i  lt  col wrapper length  i          if  col wrapper i  className toLowerCase       column             elementsToRemove push col wrapper i            for var i   0  i  lt  elementsToRemove length  i          elementsToRemove i  parentNode removeChild elementsToRemove i        The problem was my fault  when you remove an element from the resulting array of elements  the length changes  so one element gets skipped at each iteration  The solution is to store a reference to each element in a temporary array  then subsequently loop over those  removing each one from the DOM   Try it here

User · Answer

If you prefer not to use JQuery   function removeElementsByClass className       var elements   document getElementsByClassName className       while elements length  gt  0           elements 0  parentNode removeChild elements 0

User · Answer

You can you use a simple solution  just change the class  the HTML Collection filter is updated   var cur columns   document getElementsByClassName  column     for  i in cur columns       cur columns i  className           Ref  http   www w3 org TR 2011 WD-html5-author-20110705 common-dom-interfaces html

User · Answer

Using ES6 you could do like    x000D   x000D  const removeElements    elms    gt  elms forEach el   gt  el remove     x000D   x000D     Use like  x000D  removeElements  document querySelectorAll   remove      x000D   lt p class  remove  gt REMOVE ME lt  p gt  x000D   lt p gt KEEP ME lt  p gt  x000D   lt p class  remove  gt REMOVE ME lt  p gt  x000D   x000D   x000D

User · Answer

In pure vanilla Javascript  without jQuery or ES6  you could do  const elements   document getElementsByClassName  quot my-class quot     while  elements length  gt  0  elements 0  remove

User · Answer

In case you want to remove elements which are added dynamically try this   document body addEventListener  DOMSubtreeModified   function event        const elements   document getElementsByClassName  your-class-name        while  elements length  gt  0  elements 0  remove

[javascript] Removing elements by class name?

Examples related to javascript

Examples related to removeclass