title: Removing elements by class name?
body: <p>I have the below code to find elements with their class name:</p>
  
  <pre><code>// 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++) {
  
  }
  </code></pre>
  
  <p>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?</p>
  
  <p><strong>@Karim79:</strong></p>
  
  <p>Here is the JS:</p>
  
  <pre><code>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]);
      }
  }
  </code></pre>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&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;
  </code></pre>
  
  <p><strong>Edit:</strong> Well ended up just using the jQuery option.</p>