How to use jQuery .off( ) in this situation?

Question

I've been testing this script with many different arguments to put in .off() but can make this work. I want the boxes to be removable after clicking the "remove" button and I want them to be unremovable after switching the button back to done. This is my code:

var remove = "<button class=\"extension\" id=\"remove\"><a href=\"#\">Remove</a></button>";
var done = "<button class=\"extension\" id=\"done\"><a href=\"#\">Done</a></button>";

$("body").on("click", "#remove", function() {
  $("#button_field").html(done);

  $("body").on("click", "button.box", function() {
    $(this).remove();
  });
});

$("body").on("click", "#done", function() {
  $("#button_field").html(remove);
  $("body").off();
});

            body {
              font-family: Avenir;
            }
            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
              font-weight: 400;
            }
            .center {
              margin: 0 auto;
              text-align: center;
              width: 380px;
            }
            .box {
              background: #F7F7F7;
              width: 380px;
              height: 80px;
              border: 1px solid #D5D5D5;
              box-shadow: 0 0 5px #BABABA;
              font-family: inherit;
              font-size: inherit;
            }
            .extension {
              width: 380px;
              float: left;
              margin-top: 10px;
              height: 50px;
              background: #F7F7F7;
              border: 1px solid #D5D5D5;
              box-shadow: 0 0 5px #BABABA;
              font-family: inherit;
              font-size: inherit;
            }
            .extension:hover {
              cursor: pointer;
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="center">
  <h3>Click to delete</h3>
  <button class="box">REMOVE ME</button>
  <button class="box">REMOVE ME</button>
  <button class="box">REMOVE ME</button>
  <button class="box">REMOVE ME</button>
  <button class="box">REMOVE ME</button>
  <button class="box">REMOVE ME</button>
  <button class="box">REMOVE ME</button>

  <div id="button_field">
    <button class="extension" id="remove"><a href="#">Remove</a>
    </button>
  </div>
</div>

Answer 1

Your .off() call is removing ALL the click bindings on body, so you removed the delegation to #remove. You only want to remove the delegations to button.box, so it should be $('body').off('click', 'button.box');.

var remove = "<button class=\"extension\" id=\"remove\"><a href=\"#\">Remove</a></button>";
var done = "<button class=\"extension\" id=\"done\"><a href=\"#\">Done</a></button>";

$("body").on("click", "#remove", function() {
  $("#button_field").html(done);

  $("body").on("click", "button.box", function() {
    $(this).remove();
  });
});

$("body").on("click", "#done", function() {
  $("#button_field").html(remove);
  $('body').off('click', 'button.box');
});

            body {
              font-family: Avenir;
            }
            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
              font-weight: 400;
            }
            .center {
              margin: 0 auto;
              text-align: center;
              width: 380px;
            }
            .box {
              background: #F7F7F7;
              width: 380px;
              height: 80px;
              border: 1px solid #D5D5D5;
              box-shadow: 0 0 5px #BABABA;
              font-family: inherit;
              font-size: inherit;
            }
            .extension {
              width: 380px;
              float: left;
              margin-top: 10px;
              height: 50px;
              background: #F7F7F7;
              border: 1px solid #D5D5D5;
              box-shadow: 0 0 5px #BABABA;
              font-family: inherit;
              font-size: inherit;
            }
            .extension:hover {
              cursor: pointer;
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="center">
  <h3>Click to delete</h3>
  <button class="box">REMOVE ME</button>
  <button class="box">REMOVE ME</button>
  <button class="box">REMOVE ME</button>
  <button class="box">REMOVE ME</button>
  <button class="box">REMOVE ME</button>
  <button class="box">REMOVE ME</button>
  <button class="box">REMOVE ME</button>

  <div id="button_field">
    <button class="extension" id="remove"><a href="#">Remove</a>
    </button>
  </div>
</div>