删除动态添加的字段

debugcn 发表于 Dev

布鲁诺

我在jquery中动态添加字段。但是我也打算动态地消除这些领域。我正在尝试删除它，例如以下示例：

var cars = [
   {colour: "red", },
   {colour: "white", },
   {colour: "black", },
];

var campos_max = 10; 

var x = 0;
$('#add_field').click (function(e) {
e.preventDefault(); 

 if (x < campos_max) {
    $('#listas').append(`<div class="teste"><select class="form-control1 Reff reff${x}" name="Ref[]"></select></div><button class="remove_field" style="background-color: #313348;"><span class="fa fa-trash fa-fw" aria-hidden="true"></span></button>`);
 
}

var html = $(`.reff${x}`);

cars.forEach(element => {
  html.append(`<option value="`+element.colour+`">`+element.colour+`</option>`);
    });
    
    x++;
});

$('#listas').on("click",".remover_campo",function(e) {
    e.preventDefault();
    $(this).parent('.teste').remove();
    x--;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="listas"></div>

<button type="button" id="add_field" class="btn btn-warning caixa"><span class="material-icons">add</span></button>

但这不会删除我添加的字段。

罗里·麦克罗森（Rory McCrossan）

您的代码中有两个问题。首先，按钮类remove_field不是remover_campo。其次，.teste该按钮的同级不是父级，因此应使用prev()它来定位它。

此外，您还可以执行以下几项操作来改进代码，例如仅一次构建颜色选项列表，避免使用全局变量（x）来跟踪select已添加的元素数量，并删除“删除” ”按钮本身。尝试这个：

let cars = [
 { colour: "red", },
 { colour: "white", },
 { colour: "black", },
];
let campos_max = 10;
let carOptions = cars.map(o => `<option value=${o.colour}">${o.colour}</option>`).join('');

$('#add_field').click(function(e) {
  e.preventDefault();
  if ($('.teste').length >= campos_max)
    return;
    
  $('#listas').append(`<div class="teste"><select class="form-control1 Reff" name="Ref[]">${carOptions}</select></div><button class="remove_field" style="background-color: #313348;"><span class="fa fa-trash fa-fw" aria-hidden="true"></span>Remove</button>`);
});

$('#listas').on("click", ".remove_field", function(e) {
  e.preventDefault();
  $(this).prev('.teste').addBack().remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="listas"></div>

<button type="button" id="add_field" class="btn btn-warning caixa"><span class="material-icons">add</span></button>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。