javascript - JQuery 动态输入字段与子输入字段

Question

stopping my function on javascript
通过使用它，我可以在我的页面上添加无限的输入。但问题在于我的情况，我有一个输入字段，但它可能有也可能没有子输入字段，如果那么它应该与父输入字段关联。

子输入字段也必须有父输入字段。
有问题吗？
动态输入字段(从上面获取)，
动态子/子输入字段，
如何将子/子输入字段与父级相关联，
这样就可以保存到与字段相关的db中。

Answer 1

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>