Вопросы Теги

Перемещать динамические элементы с созданными кнопками dinamicamente с jquery

Я написал код, с которым я верю в элементы динамической формы, но не, как помогание, что кнопка перемещения, что он создается рядом с каждым набором, это удалила.

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>
0
задан 27.12.2019, 21:53
2 ответа

Ты можешь слушать 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>
3
ответ дан 29.12.2019, 09:10
  • 1
    Превосходный, большое спасибо из-за твоей помощи! –  Xefiron 27.12.2019, 22:10
  • 2
    делать referecia documento для динамических изменений не способствовало бы тому, чтобы он потратил больше ресурсов и был еще более медленным между большим будьте Вебом? –  Bryro 27.12.2019, 22:15

ты можешь делать это так: 

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>
3
ответ дан 29.12.2019, 09:10

Теги

Похожие вопросы