javascript - Jquery动态div多个框并放入数据库

Question

我正在尝试创建一个包含字段的动态 div block ，但很难做到这一点，以便在插入数据库时​​每个 div block 字段的 ID 不相同。

不知道该怎么办...这两天一直在苦苦挣扎，请提供帮助。

如果我不再需要它，也不知道如何删除它。 我如何将其动态发布到我的数据库中？

<div id="boxwidget" class="box-widget">    
    <div class='form-group hideblockfield'><label><span class='error-title error-fields'></span>Title</label><input type='text' class='form-control' id='title' name='title' placeholder='Title'></div>    

    <div class="form-group hideblockfield">
        <label><span class="error-description error-fields"><?php echo $description_error ?></span>Description</label>
        <textarea rows="3" type="text" class="form-control" id="description" name="description" placeholder="Description"></textarea> 

    </div>

    <div id="hideimageroup" class="hideimageroup form-group">
        <label class="hideimagelabel"><span class="error-title error-fields"><?php echo $image_error ?></span>Image</label><br>
        <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal" name="submit">Open gallery</button>
        <input type="hidden" class="form-control" id="image" name="image">
    </div>  

    <div id="hideiconroup" class="hideiconroup form-group">
        <label><span class="error-title error-fields"><?php echo $icon_error ?></span> Icon</label>
        <input type="text" class="form-control" id="icon" name="icon" placeholder="Icon">
    </div>                  

    <div class="form-group hideblockfield">
        <label><span class="error-title error-fields"><?php echo $buttontext_error ?></span>Button Text</label>
        <input type="text" class="form-control" id="buttontext" name="buttontext" placeholder="Button Text">
    </div>  

    <div class="form-group hideblockfield">
        <label><span class="error-btnurl error-fields"><?php echo $buttonurl_error ?></span>Button Url</label>
        <input type="text" class="form-control" id="buttontext" name="buttontext" placeholder="Button Url">
    </div>  
</div> 

添加新框

function createnewblock(){

    var $div = $('div[id^="boxwidget1"]:last');

    // And increment that number by 1
    var num = parseInt( $div.prop("id").match(/\d+/g), 10 ) +1;

    // Clone it and assign the new ID (i.e: from num 4 to ID "klon4")
    var $klon = $div.clone().prop('id', 'boxwidget1'+num );

    $('#boxarea').append($klon);  

}

Answer 1

首先，JS 中的第一行可能是未定义的，因为页面上没有任何带有 id boxwidget1 的内容

删除元素:

$('element query').remove()

其次，你想要做什么还不太清楚

编辑

元素的 id 与服务器端没有任何相关性，它是被映射的 name 属性。此外，name 元素仅适用于包装在 form 标记中的表单元素，除非您通过 JS 发送数据。如果没有更多信息，很难清楚地了解正在发生的事情

您能否创建一个 jsfiddle ？