How to Host Custom Preferences Page that will Delete $list_field Profile Property Previously Added?

I’m trying to accomplish something similar to the EmailInterests example documented here.

Basically I have a profile property called “preferences” which contains a list of strings.  Users can visit my hosted page and select their preferences.

<form action="" method="POST">
  <input type="hidden" name="$fields" value="preferences" />
  <input type="hidden" name="$list_fields" value="preferences" />

  <input type="email" name="$email" value="{{ person.email|default:'' }}" />

  <label>
    <input type="checkbox" name="preferences" value="pref_1" {% if 'pref_1' in person.preferences %}checked="checked"{% endif %} />
    Pref 1
  </label>

  <label>
    <input type="checkbox" name="preferences" value="pref_2" {% if 'pref_2' in person.preferences %}checked="checked"{% endif %} />
    Pref 2
  </label>

  <button type="submit">
    Update preferences
  </button>
</form>

This mostly works as expected.  Selecting just “Pref 1” makes “preferences pref_1” appear on the profile.  Selecting “Pref 1” and “Pref 2” makes “preferences pref_1, pref_2” appear.

The problem is if you uncheck both boxes, the profile doesn’t change.  I would expect it to erase the value of “preferences” but it leaves whatever value was already there.

Does anyone know of a way to solve this?