не удаляется html элемент при нажатии на кнопку через jQuery но стили применяются к кнопке. кто может подсказать?

$(function() {
  $('.btn')
    .click(function(e) {
      e.preventDefault();
      $('.block-left__text').remove();
    })
    .css({
      'margin': '20px',
      'color': 'indigo'
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="block-left">
    <h2 class="block-left__title">Список дел:</h2>
    <p class="block-left__text">Список пуст...</p>
  </div>
  <!-- /.block-left -->
  <div class="block-right">
    <h2 class="block-right__text">Добавить новое дело</h2>
    <form action="" class="block-right__form">
      <div class="form-title">
        <p class="form-title__title">* Название</p>
        <input type="text" class="form-title__text">
      </div>
      <div class="form-description">
        <p class="form-description__title">* Описание</p>
        <textarea name="" maxlength="400" class="form-description__text" id="" cols="30" rows="10"></textarea>
      </div>
      <button class="btn">Добавить дело</button>
    </form>
  </div>
  <!-- /.block-right -->