Удалить значение массива, если существует в другом массиве

Question

У меня есть набор данных на столе. Которые все владельцы.

  <table class="table">
  <tr>
    <td>
      <button id="John" onclick="deleteVal('John');" type="button"> Delete </button>
    </td>
    <td> <input type="text" name="owner[]" value="John"> John </td>
  </tr>
  <tr>
    <td><button id="Mike" onclick="deleteVal('Mike');" type="button"> Delete </button></td>
    <td> <input type="text" name="owner[]" value="Mike"> Mike </td>
  </tr>
  <tr>
    <td><button id="Sam" onclick="deleteVal('Sam');" type="button"> Delete </button></td>
    <td> <input type="text" name="owner[]" value="Sam"> Sam </td>
  </tr>
</table>

При нажатии кнопки отправки все владельцы сохраняются в этом поле final_owner. Это то, что я пробовал.

<button type="submit" id="submit">Submit</button>
FINAL OWNERS: <input type="text" id="final_owner">


 $('#submit').on('click', function() {
      var owner_value = [];
  var del_owners = document.getElementById('deleted_owners').value
      $('input[name="owner[]"]').each(function() {
          owner_value.push($(this).val());
      });
      $("#final_owner").val(owner_value);
});

Далее - каждый раз, когда я нажимаю Кнопка удаления , имя владельца сохраняется в поле ввода deleted_owners. Который я уже сделал.

Мой вопрос: как я могу удалить из массива поля final_owner, если владелец уже существует в поле ввода delete_owners.

<input type="text" id="deleted_owners">.

Answer 1

последняя строка в $ ('# submit'). On ('click') ... Вы можете попробовать это.

    var deleted_owners = $("#deleted_owners").val()
    var current_final_owner = $("#final_owner").val()

    var new_final_owner = current_final_owner.filter(item => !deleted_owners.inculdes(item))

    $("#final_owner").val(new_final_owner )

Отредактировано

Answer 2

попробуйте сделать это с помощью кнопок удаления add

Используя Sets при нажатии кнопки add, удалите кнопки

, чтобы получить наш массив final_owner из набора

  Array.from(deleted_owner);

. Проверьте пример в реальном времени: https://codesandbox.io/s/crazy-goldstine-wf01q