Removing parent div through .remove();

I'm trying to use jQuery code to remove the parent div of a <button> tag when pressed. I have this HTML code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
</script>
<script>
  $(".remove").click(function(event) {
  event.preventDefault();
  $(this).parents('.li').remove();
  });
</script>
<div id="1a">
    <input class="versionid" placeholder="Version Number"><button class="add">+</button><button class="remove">X</button><br>
    <br>
    <textarea class="textarea" placeholder="Changes"></textarea>
</div>

The jQuery code should remove the entire <div id="1a"> block, but nothing seems to happen.