我试图达到与这里完全相同的结果：https://veeva-subject-lines.tomasino.org/
它使用的是vue.js，但我在寻找一个简单的jquery或javascript解决方案。
在keyup函数中，我创建了一个包含所有输入值的数组，用“|所有输入值都显示在“result”div中。然后，使用“add”或“remove”按钮，添加具有特定ID的新输入，或者删除添加的输入。

我想要达到的目标：

的“|“分隔符是用join（）函数添加的。当删除resultdiv中的输入和关联文本时，分隔符仍然存在。如何删除它？
下面是我的代码：
第一个

EDIT：感谢Twisty，我设法添加了remove函数，现在我还可以一起删除输入和输出。下面是最终代码：

$("#inputs").on('input', 'input[type=text]', function(event) {
  
    var i = $(this).closest(".flex-row").index();
    var v = (i == 0) ? $(this).val() : "|" + $(this).val();
    $("#custom_wrapper .output").eq(i).html(v);
  });

  $('.add').click(function() {
    var count = $("#inputs input").length;
    count++;
    var row = $("<div>", {
      class: "flex-row"
    }).insertBefore(this);
    $("<label>").appendTo(row);
    $("<input>", {
      type: "text",
      class: "input",
      placeholder: "custom text " + count,
      id:"custom-text-" +count,
      tabindex: count
    }).appendTo($("label", row));
    $("<button>", {
      class: "remove"
    }).html("-").appendTo(row);
    $("<span>", {
      class: "output",
      dataid:"custom-text-" +count,
    }).insertAfter($("#custom_wrapper .output:last"));
  });
  
  $('body').on('click','.remove', function(){
      $(this).parent('.flex-row').remove();  
      var j =$(this).parent().find('.input').attr("id");
      $('#custom_wrapper .output[dataid="'+ j +'"').empty();
      
      
    })