eventListener не работает, когда appendChild для определенного div

Question

Редактировать: Ответ на вопрос.Мои кнопки были частью формы и имели submit по умолчанию type.Изменение на type="button" решило проблему.

Я использую button для добавления нового div (sectionHeader), который содержит динамически созданный button с использованием createElement(), а затем добавляю его к уже существующему div (sectionBio).

Затем я добавляю eventListener к одному из button.

Когда я добавляю sectionHeader к sectionBio, используя appendChild(), после нажатия кнопки button кнопки и раздел исчезают.В моем локальном проекте eventListener на button, который регистрирует «test» для консоли, даже не работает, хотя он работает и на codepen.

Когда я добавляю sectionHeader к телу через document.body.appendChild(), все работает как положено.

Есть идеи, что не так?

let btnAjouterSection = document.querySelector('.btn-nouvelle-section');
let sectionBio = document.querySelector('.section-bio');

btnAjouterSection.addEventListener('click', () => {
  let sectionHeader = document.createElement('div');
  let headerTitle = document.createElement('h3');
  let btnSupprimer = document.createElement('button');
  let textArea = document.createElement('textarea');
  textArea.className = 'textarea-bio';
  textArea.readOnly = true;
  sectionHeader.className = 'section-header';
  btnSupprimer.className = 'btn btn-supprimer';
  headerTitle.className = 'titre';
  btnSupprimer.textContent = 'Supprimer';
  headerTitle.textContent = 'Nouvelle Section';
  sectionHeader.appendChild(headerTitle);
  sectionHeader.appendChild(btnSupprimer);
  //document.body.appendChild(sectionHeader);
  sectionBio.appendChild(sectionHeader);
  sectionBio.appendChild(textArea);
  btnSupprimer.addEventListener('click', () => {
    console.log('test');
  })
})

$color-blue-primary: #09f;
$color-blue-dark: #0075c3;
$color-dark-gray: #4f4f4f;
$color-light-gray: #eee;
$color-white: #fff;
.container {
  display: flex;
  flex-direction: column;
  width: 80%;
  .profil-header {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 40px;
    position: relative;
    .img-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      .ajouter-photo-lien {
        text-decoration: none;
        color: $color-blue-dark;
      }
    }
    .bio-container {
      margin-left: 50px;
      .input {
        border: none;
        color: #3d3d3d;
        background: $color-light-gray;
        display: block;
        font-family: 'Source Sans Pro', sans-serif;
      }
      .input--active {
        border: 1px solid #333;
        background: #fff;
        padding: 0px 5px;
      }
      .nom {
        font-size: 2rem;
        font-weight: 600;
        margin-bottom: 20px;
      }
      .titre {
        margin-bottom: 15px;
        color: #3d3d3d;
        font-size: 1.4rem;
        font-weight: 700;
      }
      .formation {
        font-weight: 300;
        font-size: 1rem;
        color: #3d3d3d;
      }
      .medias-sociaux-container {
        margin-top: 10px;
        display: flex;
        align-items: center;
        .link {
          color: #3d3d3d;
          margin-right: 5px;
          font-size: 1.4rem;
          transition: all .2s;
          &--twitter:hover {
            color: #38A1F3;
          }
          &--linkedin:hover {
            color: #0077B5;
          }
          &--google {
            background: #3d3d3d;
            margin-top: -1px;
            border-radius: 3px;
            font-size: .8rem;
            padding: 3px 4px;
            color: $color-light-gray;
          }
          &--google:hover {
            background: #DB4437;
          }
          &--github:hover {
            color: #6cc644;
            ;
          }
          &--personal-page {
            background: #3d3d3d;
            margin-top: -1px;
            border-radius: 3px;
            font-size: .8rem;
            padding: 3px 3px;
            color: $color-light-gray;
          }
          &--personal-page:hover {
            background: $color-blue-primary;
          }
          &--email:hover {
            color: $color-blue-primary;
          }
        }
      }
    }
  }
  .section-bio {
    width: 90%;
    margin-top: 30px;
    margin-right: auto;
    margin-left: auto;
    padding: 0px 30px 40px 30px;
    background: #fff;
    display: flex;
    flex-direction: column;
    .section-header {
      display: flex;
      width: 100%;
      justify-content: space-between;
      align-items: center;
      &--nouvelle-section {
        justify-content: flex-end;
      }
    }
    .ajout-ver-ang {
      margin-top: 20px;
      display: flex;
      width: 100%;
      justify-content: flex-start;
      align-items: center;
    }
    ul {
      margin-left: 30px;
    }
    h3 {
      margin-top: 50px;
      display: inline-block;
      clear: both;
    }
    .checkbox {
      margin-right: 10px;
    }
    .label {
      font-family: 'Source Sans Pro', sans-serif;
    }
  }
}

.btn {
  background: $color-blue-dark;
  color: #fff;
  border: none;
  padding: 5px 20px;
  border-radius: 5px;
  margin-left: 20px;
  margin-top: 1.5rem;
  font-weight: 300;
  font-size: 1rem;
  cursor: pointer;
  transition: all .2s;
  &-modifier {
    &--profil {
      position: absolute;
      right: 40px;
      top: 10px;
    }
  }
  &-supprimer {
    background: red;
  }
  &:hover {
    background: $color-blue-primary;
  }
}

.textarea-bio {
  border: none;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  font-size: 1.3rem;
  line-height: 1.7rem;
  width: 100%;
  height: auto;
  resize: none;
}

.textarea--active {
  border: 1px solid #333;
  padding: 10px;
  display: block;
  width: 100%;
  background: #fff;
  color: #000;
}

<section class="container">
  <form action="" class="form">
    <div class="section-bio">
      <div class="section-header section-header--nouvelle-section">
        <button type="button" class="btn btn-nouvelle-section">Add</button>
      </div>
    </div>
  </form>
</section>