javascript - 如何在 Svelte 中正确地动态添加和删除文本输入字段？

Question

我是 Svelte 和 Web 开发的新手，希望您能为我指明正确的方向。

当前代码属于一个 svelte 组件。如此处所示:https://svelte.dev/repl/f0e5c30117724ec38b7d19781d2c4de6?version=3.48.0

它应该默认显示一个文本字段，同时允许在动态添加的按钮上添加和删除一个额外的文本字段。目前，此代码可以动态添加文本字段，但是无法在单击按钮时动态删除文本字段。

我认为 GetDynamicElement 函数中可能存在错误。但是，我不确定确切位置。有什么建议吗？

附注我知道这里有接近的答案，但我认为它们不适用于这种情况，尤其是在 Svelte 上。

<script>
  var num_links = 1;
  let container;

  const GetDynamicElement = (value) => {
    return (
      '<input name = "DynamicField" type="text" size =111  id =link  placeholder="Enter Next link! " value =  "' +
      value +
      '" />' +
      '<input type="button" value="Remove" on:click = {RemoveField(this)}>'
      // "RemoveSuggestionCart(this)" />'
    );
  };

  const addField = () => {
    if (num_links < 2) {
      console.log("addField");
      const div = document.createElement("DIV");
      div.innerHTML = GetDynamicElement("");
      container.appendChild(div); // Append timetable space
      num_links += 1;
    }
  };

  //Removes the entire division inclusive of it's text field.
  const RemoveField = (div) => {
    console.log("RemoveField");
    div.removeChild(div.parentNode);
    num_links -= 1;
  };
</script>



<div>
  <input
    name="DynamicField"
    type="text"
    size="121"
    id="link"
    placeholder="Enter First Link!"
  />
  <div bind:this={container} />
</div>

<button on:click|preventDefault={addField}>[+ add timetable link]</button>

<style>
</style>

Answer 1

添加/删除字段并有一个按钮来记录或发送到端点或任何带有“日志”按钮的东西。

    <script>
    // to display one empty inputs before clicking add needed
    let values=[{
       "url": "",
       "name": "",
    }]; 
        
    const addField = () => {
       values = [...values, {url: '', name: ''}]
    };
        
    const removeField = () => {
       values = values.slice(0, values.length-1)
    };
    </script>
        
    {#each values as v, i}
       <div>
          <input id={i} type="text" bind:value={values[i].url} placeholder="url"/>
          <input id={i} type="text" bind:value={values[i].name} placeholder="name"/>
       </div>
    {/each}
{#if values.length >= 2}
   <input type="button" value="Remove" on:click={removeField}>
{/if]
<button on:click|preventDefault={addField}>Add</button>
<button on:click={() => console.log(values)}>Log Me</button>

尝试:https://svelte.dev/repl/2441993f8d9946aa894bf07a8a8f9b4f

已编辑:感谢@Corrl - 编辑得更好。