title: Firebase remove() entire nested array in database
body: <p>How does one delete an entire nested child from a Firebase database by referencing an entry to find the desired point of deletion?</p>
  
  <p>For example, I have two entries nested under (<strong>list</strong>). (<strong>1</strong>) <code>-KcxacywN4EkvwAzugfV</code> and (<strong>2</strong>) <code>-KcxaeBAIW-WgLAsajvV</code>. I want to remove (<strong>2</strong>) <code>-KcxaeBAIW-WgLAsajvV</code> from the database using it's <strong>ID</strong> <code>-KcxaeBAIW-WgLAsajvU-4-725391765511696</code> (See picture below).</p>
  
  <p><a href="https://i.stack.imgur.com/WeJnR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WeJnR.png" alt="enter image description here"></a></p>
  
  <p>I have a button setup for each database entry, to display a remove button. Each button, contains the <code>data-</code> or <strong>ID</strong> for each database entry.</p>
  
  <pre><code>rootRef.on("child_added", snap =&gt; {
      var title = snap.child("title").val();
      var link = snap.child("link").val();
      var type = snap.child("type").val();
      var id = snap.child("id").val();
        $("#table_data").append("&lt;div class='col-lg-4'&gt;&lt;div class='card card-app'&gt;&lt;div class='card-block'&gt;&lt;h4 class='card-title'&gt;"+ title +"&lt;/h4&gt;&lt;small&gt;"+ type +"&lt;/small&gt;&lt;hr&gt;&lt;a href='"+ link +"' target='_blank'&gt;Download&lt;/a&gt;           &lt;a class='user float-right' onclick='removeClick()' data-name='"+ id +"'&gt;Remove&lt;/a&gt;            &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;");
    });
  </code></pre>
  
  <p>The onClick event and associated id for the button, trigger this function. My mental idea, is to then take the <strong>ID</strong> from <strong>data-</strong> to delete its nested child, (2) <code>-KcxaeBAIW-WgLAsajvV</code> from the database. Same process for all other nested entries.</p>
  
  <pre><code>function removeClick() {
    $(".user").click(function() {
          rvm = $(this).attr("data-name");
      });
    alert(rvm);
    firebaseRef.remove(rvm);
  }
  </code></pre>
  
  <p>I've studied <a href="https://firebase.google.com/docs/database/web/read-and-write" rel="nofollow noreferrer">https://firebase.google.com/docs/database/web/read-and-write</a> and can't seem to figure out the actual deletion of the nested entry. How can I use remove() or maybe another method to accomplish this?</p>
  
  <p>I have been trying this, to get a better understanding.</p>
  
  <pre><code>firebaseRef.child(rvm).remove();
  </code></pre>
  
  <p>Since rootRef, is how I'm viewing data. I tried.</p>
  
  <pre><code>rootRef.child().remove();
  </code></pre>
  
  <p>This simply deletes the whole database...</p>
  
  <p><strong>Final running code:</strong></p>
  
  <pre><code>function removeClick() {
    $(".user").click(function() {
          rvm = $(this).attr("data-name");
    });
    alert(rvm);
    var query = rootRef.orderByChild("id").equalTo(rvm);
    query.once("value", function(snapshot) {
     snapshot.forEach(function(itemSnapshot) {
         itemSnapshot.ref.remove();
     });
   });
  }
  </code></pre>