Removing automatically assigned ID information in Firestore can be achieved by following these steps:

async created () {
    const sn = await db.collection('forms').get()
    sn.forEach(v => {
      const { title, content } = v.data()
      this.forms.push({
        title, content, id: v.id
      })
      console.log(v.id)
    })
  },
  del () {
    const formIdToDelete = this.forms[0].id; // Assuming you want to delete the first form in the array
    db.collection('forms').doc(formIdToDelete).delete()
  }
}

I managed to retrieve the data and obtain an ID. However, I am unsure about what to specify within the doc() method when deleting.

Answer №1

If you were familiar with the document's ID, deleting it would have been a simple task like this:

firebase.firestore().collection("forms").doc("docId").delete()

However, in your scenario, an extra step is required to obtain the document ID. Depending on your database structure, let's assume you want to delete a form submitted by a user named "john" (the name must be stored in the document). To fetch the document (along with its ID), you can follow this approach:

const formDoc = await firebase.firestore().collection("forms").where("name", "==", "john").get()
if (formDoc.exists) {
  await firebase.firestore().collection("forms").doc(formDoc.id).delete()
}

In cases where names are not unique, it is advisable to use user UIDs instead. If Firebase Authentication is being utilized, include a field in the document called uid with the user's UID value. Subsequently, replace the name with the UID in the query.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Vue axios hook encounters problems while opening .json files

Starting my journey with Vue. I am encountering some difficulties when importing a .json file. This relates to setting up a small shop where the aim is to add four products to the store. The product files are supposed to be imported using an Axios hook. Ho ...

Activate the jQuery click event by specifying the URL

On my webpage, I have a jQuery click function that loads multiple HTML pages into a specified div. I am looking to set specific URLs that will trigger this event, like test.com#about <script type="text/javascript"> $(document). ...

The Google Visualization chart fails to display properly once CSS is applied

Struggling with a graph display issue here. It's quite perplexing as it works fine on older laptops and Safari, but not on Chrome or older versions of Firefox. Works like a charm on my old laptop and Safari, but fails on Chrome and Firefox (haven&apo ...

Is incorporating Leaflet.timeline npm into Vue-cli 3 now considered outdated? Error: Unable to access the property 'bottomleft' as it is undefined

My issue does not revolve around detecting an undefined object property. Instead, I am attempting to integrate Leaflet.timeline into Vue-cli 3 using npm. I have a set of features (geoJSON) that I am trying to incorporate into a timeline, however L.timeline ...

Ways to fetch a JSON object using JavaScript

Currently, I am in the process of creating an HTML5 mobile application and utilizing jQuery to fetch a JSON file from this URL: . Here is the code snippet I used: var url='http://cin.ufpe.br/~rvcam/favours.json'; $.getJSON(url, function(data, s ...

How to clear input fields in Ant Design ReactJS components

Utilizing the form list component from antd in my react.js project https://ant.design/components/form/#Form.List I have a basic form list set up where I can easily add or remove fields. At times, I need to reset the form and remove any additional items t ...

Create a web application in NodeJS that mimics browser functionality by running JavaScript code from an HTML page

I'm a beginner in NodeJS and I am working on developing a web service that can send a response with the output of a JavaScript script from an HTML page sourced online. For instance: Imagine my webpage contains a JavaScript snippet that outputs "hell ...

reduce the size of the image as the browser width decreases

Struggling with a webpage layout that features an image on the left and content area on the right, both with fixed widths. When reducing browser width, the image should not shrink but be cropped from the left side instead. Any solutions for this issue? ...

Developing a Node.js and Express REST API for generating tailored routes for custom fields

I'm currently using node.js and express framework to build my REST API server. One of the features I want to implement is similar to the Facebook graph API, where I can pass specific fields in my API routes like: /me?fields=address,birthday,email,do ...

A method for merging the values of three text fields and submitting them to a hidden text field

<label class="textRight label95 select205">Cost Center: </label> <input type="hidden" name="label_0" value="Cost Center" /> <input type="text" name="value_0" class="input64 inputTxtGray" value="" maxlength="10" /> <input type=" ...

How can I assign integer values to specific child elements after splitting them?

Below is the HTML code that needs modification: <div class="alm-filter alm-filter--meta" id="alm-filter-1" data-key="meta" data-fieldtype="checkbox" data-meta-key="Cate" data-meta-compare="IN" data-meta-type="CHAR"> <ul> <li class=" ...

"Exploring the process of looping through a JSON object following an asynchronous retrieval of JSON data using

I am facing an issue while trying to iterate through a JSON object in jQuery after fetching it asynchronously. I have a function called 'listFiles' that uses async to successfully retrieve a file list from a directory (dir) by calling an API endp ...

What is the process for adjusting the body parser limit in Firebase?

I'm attempting to proxy a file upload to Firebase cloud functions in order to prevent exposing our API url. It appears that Firebase utilizes Body-parser internally to parse the body of requests, but it is limited to 100kb by default. I've expe ...

After the Parent Component has successfully mounted, the Child Component will render

I am currently working with a third party library that has a unique prop allowing the user to pass in a string which is used to retrieve a DOM element and return its bottom value. <Sticky bottomBoundary="#some-id"> <MyChildComponentMightBeANa ...

Dynamically insert innerHTML content into table rows using JavaScript in PHP is a fantastic way to customize

Having trouble with innerHTML in this scenario, looking to achieve something along these lines: <table width="100%" border="0" id="table2"> <?php include("connection.php"); $sql=mysql_query("select* from b1"); while($res=mys ...

Manipulate Attributes in Javascript

Having an issue here - I'm trying to use JavaScript to set some attributes. for(i=0;i<div_navi.childNodes.length;i++){ if(div_navi.childNodes[i].nodeName =="SPAN"){ div_navi.childNodes[i].setAttribute("onclick","g ...

Ways to automatically close the external window upon logging out in Angular 12

I have successfully created an external window in my Angular application. Everything is working as expected, but I am facing an issue when trying to automatically close the external window upon user logout. Although I have written the code below and it wo ...

Setting a false condition on jQuery's .on('canplaythrough') event

Struggling to implement a custom audio control with jQuery, but encountering some issues. I'm in the process of converting native JavaScript to jQuery for consistency in my code, however, I can't seem to get it working. The original code that is ...

I encountered an error while trying to add a document to Firestore using the 'add' method in Vue.js. Can someone provide guidance on how to

Whenever the function is triggered (on click), I aim to include a new document. Although it functions with .set(), my goal is for a new document to be created each time the form is submitted. The current error code I am encountering is: I initially suspe ...

When accessing nested objects in Props in Vue.js, an error may occur if the property of null/undefined

When I make an axios call, I receive an object which I pass to a child component. However, when I attempt to loop through the object in the child component to access a property of another nested object, I encounter an issue where the property is showing as ...