title: Reconfigure DOM not working correctly
body: <p>I have a couple children (not a fixed amount) in a <code>div</code>. There is a <code>text input</code> that lets the user type in a number.</p>
  
  <p>Then there's a <code>function organizeNumberOfRows</code> which organizes the children based on the number from the <code>input</code>. Let me give an example. Let's say I have 4 children, and the <code>text input</code> has a number of 3. <code>organizeNumberOfRows</code> will create a <code>div</code> for every 3 children and add it to the parent element.</p>
  
  <p>The outcome hierarchy for:</p>
  
  <ul>
  <li>4 children, <code>input</code> 3: <code>#parentElem &gt; .innerWrapper &gt; (.child * 3) + .innerWrapper &gt; .child</code></li>
  <li>4 children, <code>input</code> 2: <code>#parentElem &gt; .innerWrapper &gt; (.child * 2) + .innerWrapper &gt; (.child * 2)</code></li>
  </ul>
  
  <p>Hope this is clear.</p>
  
  <p>Every time the <code>text input</code> changes, I'm going to have to reconfigure the dom. The way I did it is (<code>function clearTiles</code>), I add all the child elements to a <code>var</code> which is a <code>div</code>, and then call <code>organizeNumberOfRows</code>.</p>
  
  <p>When I call <code>organizeNumberOfRows</code> (after I change the <code>textInput</code>), nothing happens. How can I reconfigure the children after a number was inserted in the <code>text input</code>?</p>
  
  <p><a href="https://jsfiddle.net/r0faosuc/" rel="nofollow"><h3>JSFiddle</h3></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var parentTileElement = document.getElementById('parentTileElement'),
    amountOfRowsInput = document.getElementById('amountOfRows');
  
  function NumberOfRows( /** Int */ defaultValue) {
    var value = defaultValue;
  
    this.set = function(val) {
      value = val;
      var parent = clearTiles();
      console.log(parent, val);
      organizeNumberOfRows(val, parent);
    };
    this.get = function() {
      return parseInt(value);
    }
  }
  var _numberOfRows = new NumberOfRows(3);
  var _outerTilesWrapper = document.createElement('div');
  var _innerTilesWrapper;
  
  amountOfRows.addEventListener('keyup', function(e) {
    _numberOfRows.set(this.value);
  });
  
  organizeNumberOfRows(_numberOfRows.get(), parentTileElement);
  
  function organizeNumberOfRows( /** Int */ numberOfRows, /** DOM Element */ parentElem) {
    while (parentElem.children.length) {
      var currentTile = parentElem.children[0];
      if (typeof _innerTilesWrapper === 'undefined' || _innerTilesWrapper.children.length === numberOfRows) {
        _innerTilesWrapper = document.createElement('div');
        _innerTilesWrapper.className = 'innerWrapper';
        _outerTilesWrapper.appendChild(_innerTilesWrapper);
      }
      _innerTilesWrapper.appendChild(currentTile);
    }
    parentTileElement.appendChild(_outerTilesWrapper);
  }
  
  function clearTiles() {
    var tempDiv = document.createElement('div');
    var innerTileWrappers = parentTileElement.firstElementChild.children;
  
    while (innerTileWrappers.length) {
      while (innerTileWrappers[0].children.length) {
        tempDiv.appendChild(innerTileWrappers[0].children[0]);
      }
      parentTileElement.firstElementChild.removeChild(innerTileWrappers[0]);
    }
    parentTileElement.removeChild(parentTileElement.firstElementChild);
    return tempDiv; /** DOM Elem */
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
  }
  #outerTileWrapper {
    display: flex;
    flex-wrap: wrap;
  }
  #tileWrapper {
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
  }
  .tile {
    width: 100px;
    height: 100px;
    background-color: lightgreen;
    list-style: none;
    border: 1px solid black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="parentTileElement"&gt;
    &lt;div class="tile"&gt;01&lt;/div&gt;
    &lt;div class="tile"&gt;02&lt;/div&gt;
    &lt;div class="tile"&gt;03&lt;/div&gt;
    &lt;div class="tile"&gt;04&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;input type="text" id="amountOfRows"&gt;</code></pre>
  </div>
  </div>
  </p>