title: Clone a table row and remove values in JavaScript
body: <p>I have a set of text inputs fields which I want to be cloned when the user clicks the "add" button. My problem is that the fields are being cloned <strong>with</strong> the input from the user. Using Javascript, how do I reset the value of the text input fields so they may be cloned without cloning the user input text.</p>
  
  <p>This is my code...</p>
  
  <pre><code>&lt;table width="766"  border="0" cellspacing="0" cellpadding="0" id="albumTable"&gt;  
      &lt;tr id="clone"&gt;  
          &lt;td width="230"&gt;&lt;input type="text" name="dj_1" /&gt;&lt;/td&gt;  
          &lt;td width="230"&gt;&lt;input type="text" name="affiliations_1" /&gt;&lt;/td&gt;  
          &lt;td width="230"&gt;&lt;input type="text" name="rating_1" /&gt;&lt;/td&gt;  
          &lt;td width="230"&gt;&lt;input type="text" name="comments_1" /&gt;&lt;input type="hidden" name="count" value="1" class="count"/&gt;&lt;/td&gt;
          &lt;td width="286" style="position:absolute; top:110px; left: 670px;"&gt;&lt;input name="button" type="button" id="Add" value="ADD ROW" onclick="addRow(this.parentNode.parentNode)"&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;script type="text/javascript"&gt;
      function addRow(r){  
          var root = r.parentNode;  
          var allRows = root.getElementsByTagName('tr');  
          var cRow = allRows[0].cloneNode(true)  
          var cInp = cRow.getElementsByTagName('input');  
          var countRow = cRow.getElementsByClassName('count');  
  
          for(var i=0;i&lt;cInp.length;i++){
              cInp[i].setAttribute('name',cInp[i].getAttribute('name').replace(/\d/g,(allRows.length+1)))   
          }  
          for(var j=0;j&lt;countRow.length;j++){
              countRow[j].setAttribute('value',countRow[j].getAttribute('value').replace(/\d/g,(allRows.length+1)))
          }  
          root.appendChild(cRow);  
      }  
  
      function shownames(){
          var allInp=document.getElementsByTagName('input');
          for(var i=0;i&lt;allInp.length;i++){
              alert(allInp[i].name)  
          }  
      }  
  &lt;/script&gt;
  </code></pre>