Cloning a table line in Javascript - How to remove slected option?

Question

I am cloning a table line with Javascript, Step 1: cloning OK

But cloning copies data. i want to set all inputs to 0 or null. it works for all input types but i am unable to have it work with a select-option

I tested with number, text, checkboxes.... all ok except select

Here my code:

<?php

<table ID="trig_strava_register_to_single_contest">
      <thead>
          <th>
            <h3>-</h3>
          </th>
          <th>
            <h3>Username</h3>
          </th>
          
        </thead>  
   <tbody>
            <tr>
                <td><input type="checkbox" name="chk"/></td>
             <td>
                <select name="trig_strava_register_to_single_contest[]" >
                    <option value="" >--Please choose an option--</option>
                    <option value= "1" > 1 </option>
                    <option value= "2" selected> 2 </option>
                    <option value= "1" > 3 </option>
                </select>
            </td>
          </tr>
      </tbody>
     </table>

            <p>
            <INPUT type="button" class= "button" value="Add Row" onclick="addRow('trig_strava_register_to_single_contest')" />
              <br>
            <INPUT type="button" class= "button" value="Delete Selected Rows*" onclick="deleteRow('trig_strava_register_to_single_contest')" /> 

here my Jscript

function addRow(tableID) {

    var table = document.getElementById(tableID);
    
    var rowCount = table.rows.length;
    var rowHeadCount = table.tHead.rows.length;
    var row = table.insertRow(rowCount);
  
    var colCount = table.rows[0].cells.length;
    
  
    for(var i=0; i<colCount; i++) {
  
      var newcell   = row.insertCell(i);
      newcell.innerHTML = table.rows[0+rowHeadCount].cells[i].innerHTML;

      switch(newcell.childNodes[0].type) {
        case "input":    
            newcell.childNodes[0].value = 0;
            break;
        case "date":    
            newcell.childNodes[0].value = "1999-12-31";
            newcell.childNodes[0].setAttribute('value',"1999-12-31");
            break;
        case "time":    
            newcell.childNodes[0].value = "00:00:00";
            newcell.childNodes[0].setAttribute('value',"00:00:00");
            break;
        case "select-one":
            newcell.childNodes[0].selectedIndex = 0;
            break;
           
        default:
                newcell.childNodes[0].value = 0;
                newcell.childNodes[0].setAttribute('value',0);
           
                break;
       
      }
    }
  }
  

What am i doing wrong or does select behave differently from input?

Answer 1

The error was in a space between and . the space is consideredd a ChildNode

to fix this I changed the JS to loop into the childnodes and changing the index of childnode from [0] to a relative index

function addRow(tableID) {

var table = document.getElementById(tableID);

var rowCount = table.rows.length;
var rowHeadCount = table.tHead.rows.length;
var row = table.insertRow(rowCount);

var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {

  var newcell   = row.insertCell(i);
  newcell.innerHTML = table.rows[0+rowHeadCount].cells[i].innerHTML;
  
//added the childnodes lenght (count) to loop through  the childnodes (previously set at [0]) 
  var the_node_count = (newcell.childNodes.length); 
    for (let x = 0; x < the_node_count; x++) {
        switch(newcell.childNodes[x].type) {
            // case "number":    
            //     newcell.childNodes[x].value = 0;
            //     break;
            case "input":    
                newcell.childNodes[x].value = 0;
                // newcell.childNodes[x].value = null;
                break;
            case "date":    
                newcell.childNodes[x].value = "1999-12-31";
                newcell.childNodes[x].setAttribute('value',"1999-12-31");
                break;
            case "time":    
                newcell.childNodes[x].value = "00:00:00";
                newcell.childNodes[x].setAttribute('value',"00:00:00");
                break;
            case "select-one":
                newcell.childNodes[x].selectedIndex = 0;
                break;
            
            default:
                    newcell.childNodes[x].value = 0;
                    // newcell.childNodes[x].setAttribute('value',0);
                    newcell.childNodes[x].selectedIndex = 0;
                    break;
        
        }   
    }   
}

}