The "Close" button isn't working on my paragraph element. What is wrong?

Question

I have a set of announcements on my website embedded inside

tags. I would like to give the users the ability to close these announcements and get on with their life. The following is an account of what I have done.

The following didn't close (hide) the paragraph element. What am I doing wrong?

I'm using Bootstrap Version 5.1.3 and JQuery.

function closeNote(button) {
  var note = button.parentNode;
  note.style.display = 'none';
}

.note {
  position: relative;
  display: inline-block;
  padding-right: 30px;
  /* Add space for the button */
}

.note .close-button {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
}

.note .close-button i {
  color: #999;
  font-size: 20px;
}

.note .close-button:hover i {
  color: #000;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<p class="note notesbonus">
  <i class="bi bi-patch-plus-fill"></i> Note 1
  <button class="close-button" onclick="closeNote(this)">
      <i class="bi bi-x"></i>x
  </button>
</p>

<p class="note otherclass"> <i class="bi bi-patch-plus-fill"></i> Note 2 <button class="close-button" onclick="closeNote(this)">
      <i class="bi bi-x"></i>x
  </button>
</p>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>