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

Question

我是Svelte和Web开发的新手，希望您可以将我指向正确的方向。

当前代码属于Svelte组件。 如下所示：

默认情况下应该显示一个文本字段，同时允许在动态添加的按钮上添加并删除附加的文本字段。 当前，此代码可以动态添加文本字段，但是，它无法在按钮点击上动态删除文本字段。

我相信getDynamicElement函数可能会出现错误。但是，我不确定到底在哪里。有什么建议吗？

PS我知道这里有一些答案很接近，但我认为它们不适用于这种情况，尤其是在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>

尝试：

编辑：谢谢@Corrl-编辑。

Answer 2

您可以使用 num_link 和Svelte's > 使用Svelte创建输入：

{#each Array(num_links) as _, i}
<div>
  <input
    name="DynamicField"
    type="text"
    size="121"
    id={`link_${i}`}
    placeholder="Enter First Link!"
  />
</div>
{/each}

工作示例：