title: Can't Remove Data because of Child Reference Error?
body: <p>I have a user structure where I can create and update a user but I cannot remove a user due to a reference child error due to some kind of string.</p>
  
  <p>Basically, I have a realtime database consists of different users ID then there's the Name, Age and Nationlaity.</p>
  
  <p><a href="https://i.stack.imgur.com/TY3yv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TY3yv.png" alt="HTML Error"></a></p>
  
  <p><a href="https://i.stack.imgur.com/fmjwd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fmjwd.png" alt="Firebase Users"></a></p>
  
  <p>I want to be able to try and delete a user by its user ID for instance (usr5) so that when I enter that it'll delete the user from the database.</p>
  
  <p>Can anyone help?</p>
  
  <p><strong>The Error:</strong> </p>
  
  <pre><code>Reference.child failed: First argument was an invalid path = "[object HTMLInputElement]". Paths must be non-empty strings and can't contain ".", "#", "$", "[", or "]"
  at fi (validation.ts:382)
  at o.child (Reference.ts:90)
  at removeUser ((fie path folders) index.html:115:58)
  </code></pre>
  
  <p><strong>My HTML:</strong></p>
  
  <pre><code>&lt;body&gt;
  
      &lt;div&gt;
          &lt;h4&gt;Create User: &lt;/h4&gt;
  
              &lt;form&gt;
                  &lt;label&gt;Create User ID: &lt;/label&gt;&lt;input type="text" id="usrID"/&gt;&lt;br/&gt;
                  &lt;label&gt;First Name: &lt;/label&gt;&lt;input type="text" id="usrFName"/&gt;&lt;br/&gt;
                  &lt;label&gt;Age: &lt;/label&gt;&lt;input type="number" id="usrAge"/&gt;&lt;br/&gt;
                  &lt;label&gt;Nationality: &lt;/label&gt;
                      &lt;select id="usrNation"&gt;
                          &lt;option value="American"&gt;American&lt;/option&gt;
                          &lt;option value="British"&gt;British&lt;/option&gt;
                          &lt;option value="French"&gt;French&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;button id="createUserBtn"&gt;Create&lt;/button&gt;              
              &lt;/form&gt;
      &lt;/div&gt;
  
      &lt;div&gt;
          &lt;h4&gt;Remove User: &lt;/h4&gt;
  
              &lt;form&gt;
                  &lt;label&gt;Create User ID: &lt;/label&gt;&lt;input type="text" id="usrID"/&gt;&lt;br/&gt;
                  &lt;button id="removeUserBtn"&gt;Remove&lt;/button&gt;              
              &lt;/form&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>My Firebase/Javascript:</strong></p>
  
  <pre><code>&lt;script&gt;
  
  var database = new Firebase("https://(my db url)/"),
  
      userdb = database.child("/users");
  
      userID = document.getElementById('usrID'),
      userFirstName = document.getElementById('usrFName'),
      userAge = document.getElementById('usrAge'),
      userNationality = document.getElementById('usrNation');
  
  
  function createUser(userID, usrFName, usrAge, usrNation){
      firebase.database().ref('users/' + userID).set({
          usrFName: usrFName,
          usrAge: usrAge,
          usrNation: usrNation            
      });
  
      console.log('Success');
  }
  
  function insertAutoKey(usrFName, usrAge, usrNation){
  
      var newPost = {
          usrFName: usrFName,
          usrAge: usrAge,
          usrNation: usrNation
      };
  
      var newPostKey = firebase.database().ref().child('users').push().key;
  
      var updates = {};
      updates['/users/' + newPostKey] = newPost;
      return firebase.database().ref().update(updates);
  }
  
  document.getElementById('createUserBtn').addEventListener('click', function(){
  
      var usrID = userID.value,
          usrFName = userFirstName.value,
          usrAge = userAge.value,
          usrNation = userNationality.value;
  
      if(usrID &amp;&amp; usrFName &amp;&amp; usrAge &amp;&amp; usrNation) {
          createUser(usrID, usrFName, usrAge, usrNation);
      }       
  });
  
  function removeUser(){
      var userRef = firebase.database().ref().child("users").child(userID);
  
      userRef.once('value', function(snapshot) {
  
          if (snapshot.val() === null) {
              alert("no user found");
          }else{
              userRef.remove();
          }
      });
      console.log('Remove Success');
  }
  
  document.getElementById('removeUserBtn').addEventListener('click', function(){
      removeUser();
  });
  </code></pre>
  
  <p></p>