Full-Stack Web Applications with Firebase/

...

/

Clear Messages

Clear Messages

This lesson covers how to delete all messages from the database which in turn erases them from your chat stream.

We'll cover the following...

Set Up Your Clear Button

We start by creating an HTML button. We will add an id to it so we can attach an event listener.

Press + to interact
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<script src="https://www.gstatic.com/firebasejs/6.3.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/6.3.0/firebase-firestore.js"></script>
</head>
<body>
	<div id="container">
		<div id="user-options">
			<div>Chatting as: <span id="name"></span></div>
			<div id="change-name">change name</div>
		</div>
		
		<form id="message-form">
			<input type="text" id="message-input" placeholder="message" required>
			<button class="orange-button">send</button>
		</form>
		<div id="messages"></div>
		<button id="clear" class="purple-button">Clear All Messages</button>
	</div>
</body>
</html>

Make an Event Listener

Since it’s a button, the event we want to listen for is click.

Press + to interact
document.querySelector('#clear').addEventListener('click', () => {
})

Place the Firestore Query Into the Click Event

To delete, we ...