javascript - JQuery 动态输入带有子输入字段的字段

Question

在 javascript 上停止我的功能
通过使用它，我可以在我的页面上添加无限的输入。但问题是在我的情况下，我有一个输入字段，但它可能有也可能没有子输入字段或子输入字段，如果那么它应该与父输入字段相关联。

子输入字段也必须是父输入字段。
问题？
动态输入字段（从上面得到），
动态子/子输入字段，
如何将子/子输入字段与父字段关联，
以便它可以保存在与字段相关的数据库中。

Answer 1

使用类似的功能并在具有不同名称的段落下附加，希望这会有所帮助。尝试一下。

Answer 2

http://jsfiddle.net/Shahbaz/WhaBx/

由此我可以添加多个输入字段并附加多个子/子输入字段。可以附加。我会尝试修改更多。

$(function() {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents label').size() + 1;

    $('#addScnt').live('click', function() {
        $('<p>Keyword: '+i+'<a href="#" id="remScnt">Remove</a><br><labelfor="p_scnts"><input type="text" id="p_scnt" size="20" name="keyword[]" value="" placeholder="Enter Keyword" /><a href="#" id="addVar">Add Variants</a><a></a></label></p>').appendTo(scntDiv);
        i++;
        return false;
    });

    $('#remScnt').live('click', function() {
      if( i >2 ) {
          $(this).parents('p').remove();
          i--;
       }
       return false;
    });

    $('#addVar').live('click', function() {
    //alert();
    $('<p><label for="var"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Enter Vareyword" /></label> <a href="#" id="remVar">Remove Var</a></p>').appendTo($(this).next());
    return false;
    });


    $('#remVar').live('click', function() {
       $(this).parent('p').remove();
       return false;
    }); 
});

<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>
<div id="p_scents">
    <p>
       Keyword: 1
    <br/>
       <label for="p_scnts"><input type="text" id="p_scnt" size="20" name="keyword[]" value="" placeholder="Enter keyword">
       <a href="#" id="addVar">Add Variants</a>
       </label>
    </p>
</div>