Question

我有一个脚本，它会动态添加带有表单字段的新div。

现在我想将“添加”按钮移除到“删除”按钮，然后单击“删除”按钮，应删除main-div <div id="dyn_template_telefon_1475731106" class="row>。

也许有人可以帮助我并展示我必须为此做些什么？

以下是javascript的代码

//Anfang DynamicFields
$(function () {
$(document).on('click', '.btn-add', function () {

//Fallback fuer Timestamp
var TS = Math.round(+new Date()/1000);

//var del_id = $(this).attr('id');
var templateID = $(this).attr('id').replace('dyn_btn_', 'dyn_template_');
var addareaID = $(this).attr('id').replace('dyn_btn_', 'dyn_addarea_');

$('<div/>', {
    'id' : templateID+'_'+TS,
  'class' : 'row',
  html: $('#'+templateID).clone().html()
}).hide().appendTo('#'+addareaID).slideDown('slow');
});
});
function GetHtml() {
  return $('.dynDiv').clone().html();
}
$('.btn-add').click();
//Ende DynamicFields

这就是HTML-Part

<div class="row" id="dyn_template_telefon">
    <div class="col-md-3">
      <div class="form-group '.$error['telefon']['class'].'">
        <label class="control-label">'.$lang['mod1'][70].'</label>
        <input id="telefon" name="telefon[]" class="form-control" placeholder="" type="text" value="'.$_POST['telefon'].'">
      </div>          
    </div>
    <div class="col-md-2">
      <div class="form-group">
        <label class="control-label">'.$lang['mod1'][85].'</label>
        <select id="kategorie" class="form-control " name="kategorie[]" >
          <option value="">'.$lang['mod1'][87].'</option>'.$options['categories'][2].'</select>
      </div>
    </div>
    <div class="col-md-1">
      <div class="form-group">
        <label class="control-label">&nbsp;</label>
        <span class="input-group-btn">
         <button class="btn btn-success btn-add" id="dyn_btn_telefon" type="button">
          <span class="glyphicon glyphicon-plus"></span>
         </button>
        </span>
      </div>
    </div>
  </div>
  <div id="dyn_addarea_telefon"></div>

Answer 1

您需要添加delete按钮，并在该按钮的onclick事件中，您必须找到该div的主要父级的ID并将其删除。

$(document).on('click', '.btn-delete', function () {
    var num = $(this).parent().parent().parent().parent().attr('id').match(/\d+/);
    $('#dyn_template_telefon_' + num).remove();
});

更新了JS

    //Anfang DynamicFields
    $(function () {
    $(document).on('click', '.btn-add', function () {

    //Fallback fuer Timestamp
    var TS = Math.round(+new Date()/1000);

    //var del_id = $(this).attr('id');
    var templateID = $(this).attr('id').replace('dyn_btn_', 'dyn_template_');
    var addareaID = $(this).attr('id').replace('dyn_btn_', 'dyn_addarea_');

    $('<div/>', {
        'id' : templateID+'_'+TS,
      'class' : 'row',
      html: $('#'+templateID).clone().html()
    }).hide().appendTo('#'+addareaID).slideDown('slow');
    });


    $(document).on('click', '.btn-delete', function () {
    var num = $(this).parent().parent().parent().parent().attr('id').match(/\d+/);
    $('#dyn_template_telefon_' + num).remove();
    });


    });
    function GetHtml() {
      return $('.dynDiv').clone().html();
    }
    $('.btn-add').click();
    //Ende DynamicFields

更新了HTML

    <div class="row" id="dyn_template_telefon">
        <div class="col-md-3">
          <div class="form-group '.$error['telefon']['class'].'">
            <label class="control-label">'.$lang['mod1'][70].'</label>
            <input id="telefon" name="telefon[]" class="form-control" placeholder="" type="text" value="'.$_POST['telefon'].'">
          </div>          
        </div>
        <div class="col-md-2">
          <div class="form-group">
            <label class="control-label">'.$lang['mod1'][85].'</label>
            <select id="kategorie" class="form-control " name="kategorie[]" >
              <option value="">'.$lang['mod1'][87].'</option>'.$options['categories'][2].'</select>
          </div>
        </div>
        <div class="col-md-1">
          <div class="form-group">
            <label class="control-label">&nbsp;</label>
            <span class="input-group-btn">
             <button class="btn btn-success btn-add" id="dyn_btn_telefon" type="button">
              <span class="glyphicon glyphicon-plus"></span>
             </button>
            </span>
            <span class="input-group-btn">
             <button class="btn btn-danger btn-delete" id="dyn_btn_telefon_d" type="button">
              <span class="glyphicon glyphicon-minus"></span>
             </button>
            </span>
          </div>
        </div>
      </div>
    <div id="dyn_addarea_telefon"></div>

工作小提琴：https://jsfiddle.net/khairulhasanmd/w9jhpbLy/1/

更改按钮并在点击时删除div

1 个答案: