ボタンを押すと要素が消える仕様にしたい

Question

<div class="choicesContainer">
  <input type="text" maxlength="30" class="choice">
  <input type="text" maxlength="30" class="choice">
</div>
<div class="add">追加</div>

(function() {
  'use strict';

  var add = document.getElementsByClassName('add');
  var choicesContainer = document.getElementsByClassName('choicesContainer');

  add[0].addEventListener('click', function() {
    var choiceFrame = document.createElement('div');
    var delBtn = document.createElement('div');
    var input = document.createElement('input');


    choiceFrame.classList.add('choiceFrame');
    delBtn.classList.add('delBtn');
    input.setAttribute('type', 'text');
    input.setAttribute('maxlength', '30');
    input.classList.add('choice');

    delBtn.innerHTML = '×';
    choiceFrame.appendChild(input);
    choiceFrame.appendChild(delBtn);
    choicesContainer[0].appendChild(choiceFrame);


    var choiceBox = document.getElementsByClassName('choiceFrame');
    var del = document.getElementsByClassName('delBtn');

    for(var i = 0; i < del.length; i++) {
      del[i].addEventListener('click', function() {
        choiceBox[i].remove();
      })
    }
  })
})();

「追加」を押すと、inputタグと×印が両方現れます。×印を押すと、×印も消え、さらに一緒に出現してきたinputタグも同時に消えるようにしたいのですが、うまくいきません。
どのように改善すればよいでしょうか？

Comments

[m.ts10806]

「うまくいきません」とは何が起きているのでしょうか？実際に起きた現象・問題・エラーなどありましたら追記してください。

[ryoo_chksl]

「追加」をx回押したときにあらわれるバツ印をXバツ、inputをXinputとします。1バツを押すと2inputが消えたり、２inputと4inputが同時に消えたり、問題はいろいろと生じています。生じる問題の傾向性が自分もよく分かっていないので、言語化が難しいです。お手数ですが、コードをテキストエディタにコピペして実際にどういう動きになるのかを見ていただいた方が分かりやすいかと思われます。

[m.ts10806]

質問は編集できるので追記してください。質問者さんが何をどこまで把握しているかは回答のために必要な情報ですが、こちらのコメント欄はデフォルト非表示で目につきにくいですし質問本文との連動性もとりづらくなるので