Я написал код, с которым я верю в элементы динамической формы, но не, как помогание, что кнопка перемещения, что он создается рядом с каждым набором, это удалила.
jQuery(document).ready(function() {
// CREAR
$('#crear').on('click', function() {
$('#elementos').append('<div class="form-row"><div class="col"><input type="text" class="form-control"></div><div class="col"><input type="text" class="form-control"></div><div class="col"><button class="remover btn btn-danger">Remover</button></div></div><br>');
});
//ELIMINAR
//Esto es lo que no se hacer, una ayuda la agradeceria.
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="crear" class="btn btn-success">Crear</button>
<br><br>
<div id="elementos"></div>
Ты можешь слушать click
кнопки удалять, и хотя этот ищет parent
определенного класса где эта, элемент, который ты добавил.
Для того, чтобы не вышло место в мишени, когда ты удаляешь, так как по окончании тебя append
ты добавляешь один <br>
, добавил один margin:2px;
к каждому элементу.
jQuery(document).ready(function() {
// CREAR
$('#crear').on('click', function() {
$('#elementos').append('<div class="form-row" style="margin:2px;"><div class="col"><input type="text" class="form-control"></div><div class="col"><input type="text" class="form-control"></div><div class="col"><button class="remover btn btn-danger">Remover</button></div></div>');
});
//ELIMINAR
$(document).on('click', '.remover', function(){
$(this).parents('.form-row').remove();
})
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="crear" class="btn btn-success">Crear</button>
<br><br>
<div id="elementos"></div>
ты можешь делать это так:
jQuery(document).ready(function() {
// CREAR
$('#crear').on('click', function() {
$('#elementos').append('<div class="form-row separacion"><div class="col"><input type="text" class="form-control"></div><div class="col"><input type="text" class="form-control"></div><div class="col"><button class="remover btn btn-danger">Remover</button></div></div>');
});
// seleccionamos al padre y utilizamos delegate
// para buscar el elemento hijo con la clase remover
$("#elementos").on("click",".remover",function(e){
// hacemos referencia al elemento clickeado con $(this)
// luego buscamos a su padre div con clase form-row
$(this).parents('.form-row').remove()
// $(this).remove();
})
});
/*para evitar el uso de br*/
.separacion{
margin-bottom:3px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="crear" class="btn btn-success">Crear</button>
<br><br>
<div id="elementos"></div>
documento
для динамических изменений не способствовало бы тому, чтобы он потратил больше ресурсов и был еще более медленным между большим будьте Вебом? – Bryro 27.12.2019, 22:15