How to remove each note on dblclick and also remove from the array with filter method

Question

I need help to remove each note on dblclick and also remove from the notes array with filter method. We should use unique id with Math.random()

Here is my code

let notes = [];
const container = document.querySelector('.flex-cont')
const inputNote = document.getElementById('noteInput')
const addButton = document.getElementById('addNote')
let noteElement;


class Note {
  constructor(description, id) {
    this.description = description
    this.id = id
  }
}

addButton.addEventListener('click', postNote)

function postNote() {
  let note = inputNote.value
  let newNote = new Note(note, Math.random())
  noteElement = document.createElement('div')
  noteElement.classList.add('paper', 'pink')
  noteElement.setAttribute('id', this.id)
  let noteText = document.createElement('p')
  noteText.textContent = note
  noteElement.append(noteText)
  let tape = document.createElement('div')
  tape.classList.add('tape-section')
  noteElement.append(tape)
  noteElement.addEventListener('dblclick', () => {
    // notes.filter(id => this.id != id )
    // if (noteElement.id === this.id) {
      const doDelete = confirm('Are you sure ?');
      if (doDelete) {
        noteElement.remove()
      }
    // }
    
  })
  container.appendChild(noteElement)
  notes.push(newNote) 
  inputNote.value = '';
}

console.log(notes)

HTML and CSS are here

http://jsfiddle.net/30tjop4d/

Answer 1

let notes = [];
const container = document.querySelector('.flex-cont')
const inputNote = document.getElementById('noteInput')
const addButton = document.getElementById('addNote')


class Note {
  constructor(description, id, element) {
    this.description = description
    this.id = id
    this.element = element
  }
}

addButton.addEventListener('click', postNote)

function postNote() {
  let note = inputNote.value
  noteElement = document.createElement('div')
  noteElement.classList.add('paper', 'pink')
  noteElement.setAttribute('id', this.id)
  let noteText = document.createElement('p')
  noteText.textContent = note
  noteElement.append(noteText)
  let tape = document.createElement('div')
  tape.classList.add('tape-section')
  noteElement.append(tape)
  
  let newNote = new Note(note, Math.random(), noteElement)
  notes.push(newNote) 
  
  noteElement.addEventListener('dblclick', () => {
    // notes.filter(id => this.id != id )
    // if (noteElement.id === this.id) {
      const doDelete = confirm('Are you sure ?')
      if (doDelete) {
        const noteToRemove = notes.find(n => n.id === newNote.id)
        noteToRemove.element.remove()
        notes = notes.filter(n => n.id !== newNote.id)
        console.log(notes.map(n => n.id))
      }
    // }
    
  })
  
  container.appendChild(noteElement)
  inputNote.value = '';
}

console.log(notes)

:root {
  --pink: #ecb2ba;
  --pink-dark: #c6939a;
  --tape-gray: #dbd8be;
  --tape-edge-gray: #b7b49d;
  --transparent: rgba(255, 255, 255, 0);
}

body {
  text-align: center;
  background-color: #1a2980;
  font-family: sans-serif;
}
h1 {
  text-align: center;
  color: white;
}
.flex-cont {
  padding: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 30px;
}

input,
button {
  display: inline-block;
  margin: 2em auto;
  padding: 0.5em 0.7em;
  border: none;
  border-radius: 0.2em;
  /* width: 15em; */
  font-size: 1.5em;
  text-align: center;
  box-shadow: 0 0 1em 0.25em rgba(0, 0, 0, 0.2);
}
:root {
  --pink: #ecb2ba;
  --pink-dark: #c6939a;
  --tape-gray: #dbd8be;
  --tape-edge-gray: #b7b49d;
  --transparent: rgba(255, 255, 255, 0);
}

.pink {
  --paper-color: var(--pink);
  --paper-dark: var(--pink-dark);
  --shadow-size: 1px;
  --transparent: rgba(236, 178, 186, 0);
}

.blue {
  --paper-color: #d5e0f9;
  --paper-dark: #c2d0ea;
  --shadow-size: 3px;
  --transparent: rgba(213, 224, 249, 0);
}

.paper {
  position: relative;
  background: linear-gradient(
      to bottom right,
      var(--paper-dark),
      20%,
      var(--transparent)
    ),
    var(--paper-color);
  min-width: 250px;
  min-height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Caveat", cursive;
  font-size: 2rem;
  box-shadow: var(--shadow-size) var(--shadow-size) 2px var(--paper-dark);
  margin: auto;
  margin-top: 50px;
}

.paper::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(
      var(--transparent),
      50%,
      var(--paper-dark),
      51%,
      var(--transparent)
    ),
    linear-gradient(
      to right,
      var(--transparent),
      50%,
      var(--paper-dark),
      51%,
      var(--transparent)
    );
}

.tape-section {
  position: absolute;
  width: 100%;
}

.top-tape {
  position: absolute;
  height: 4vmin;
  top: -5px;
  width: 110%;
  background-color: var(--tape-gray);
  border-right: 1px dotted var(--tape-edge-gray);
  border-left: 1px dotted var(--tape-edge-gray);
  opacity: 0.5;
}

.tape-section:first-of-type {
  top: 0;
}

.tape-section:last-of-type {
  bottom: 0;
}

.tape-section::before,
.tape-section::after {
  content: "";
  width: 10vmin;
  height: 4vmin;
  position: absolute;
  background-color: var(--tape-gray);
  opacity: 0.5;
  border-right: 1px dotted var(--tape-edge-gray);
  border-left: 1px dotted var(--tape-edge-gray);
}

.tape-section:last-of-type::after {
  transform: rotate(-45deg);
  right: -4vmin;
  top: -3vmin;
}

.tape-section:first-of-type::before {
  transform: rotate(-45deg);
  left: -4vmin;
}

.tape-section:first-of-type::after {
  transform: rotate(45deg);
  right: -4vmin;
  top: 0;
}

.tape-section:last-of-type::before {
  transform: rotate(45deg);
  left: -4vmin;
  bottom: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Notes</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <h1>Notes</h1>
    <input type="text" id="noteInput" placeholder="enter your note" />
    <button id="addNote">Add Note</button>
    <div class="flex-cont">
      <!-- <div class="paper pink">
        <p>drink more water</p>
        <div class="tape-section"></div>
      </div> -->
    </div>
    <!-- <script src="./countries-db.js"></script> -->
    <script src="./index.js"></script>
  </body>
</html>