Блог

У меня есть страница HTML5. Я хочу, чтобы следующий div автоматически заполнял пробел при динамическом удалении верхнего div с помощью кнопки. В настоящее время, когда я удаляю верхний div, образуется большой пробел. Следующий div не будет двигаться вверх, чтобы автоматически заполнить пробел.

Перед удалением некоторого div выбора:

После удаления для некоторого выбора div:

Вот код, который я использую:

 <style>
    .field{ display: inline; }
</style>   

<button class="button3" type="button" id="add_more">Add Discipline</button><p>  

<script>
$('#add_more').click(function(e){
    e.preventDefault();
      current_id;
    $("p").before("           <div class='field' id="  current_id   ">         <select style="min-height:30px;min-width:100px;" name="   current_id    ">n"  
        "                        <option value="All Disciplines" selected disabled hidden>--Select--</option>n"  
        "                        <option value="All Disciplines" name="discipline_name_all2">All Disciplines</option>n"  
        "                        {% for discipline in query_results %}n"  
        "                        <option value="{{ discipline.name }}" name="discipline_name2">{{ discipline.name }}</option>n"  
        "                        {% endfor %}n"  
        "                    </select>amp;ensp;amp;nbsp;n"  
        "                    <button class="button4" type="button" onclick="delete_button_clicked2(this.id)" id="  current_id   ">amp;#x2716;</button></div><br><br>");

    console.log(current_id);
});
    
function delete_button_clicked2(id) {      
    var sel = document.getElementById(id);    
    sel.remove();
}
</script>
 

Проблема, с которой вы столкнулись, заключается в том, что вы удаляете div, но не разрывы.

     $("p").before("           <div class='field' id="  current_id   ">         <select style="min-height:30px;min-width:100px;" name="   current_id    ">n"  
    "                        <option value="All Disciplines" selected disabled hidden>--Select--</option>n"  
    "                        <option value="All Disciplines" name="discipline_name_all2">All Disciplines</option>n"  
    "                        {% for discipline in query_results %}n"  
    "                        <option value="{{ discipline.name }}" name="discipline_name2">{{ discipline.name }}</option>n"  
    "                        {% endfor %}n"  
    "                    </select>amp;ensp;amp;nbsp;n"  
    "                    <button class="button4" type="button" onclick="delete_button_clicked2(this.id)" id="  current_id   ">amp;#x2716;</button>
<!-- These two br will stay... -->
</div><br><br>");
 

Если вы разместите их внутри div, удаление будет работать, не оставляя места позади.

Вот рабочий пример:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
    .field{ display: inline; }
</style>   

<button class="button3" type="button" id="add_more">Add Discipline</button><br><p>  

<script>
var current_id = 0;
$('#add_more').click(function(e){
    e.preventDefault();
      current_id;
    $("p").before("<div class='field' id="  current_id   "><select style="min-height:30px;min-width:100px;" name="   current_id    ">n"  
        "                        <option value="All Disciplines" selected disabled hidden>--Select--</option>n"  
        "                        <option value="All Disciplines" name="discipline_name_all2">All Disciplines</option>n"  
        "                        {% for discipline in query_results %}n"  
        "                        <option value="{{ discipline.name }}" name="discipline_name2">{{ discipline.name }}</option>n"  
        "                        {% endfor %}n"  
        "                    </select>amp;ensp;amp;nbsp;n"  
        "                    <button class="button4" type="button" onclick="delete_button_clicked2(this.id)" id="  current_id   
        // <br><br> inside the div
        ">amp;#x2716;</button><br><br></div>"); 

    console.log(current_id);
});
    
function delete_button_clicked2(id) {      
    var sel = document.getElementById(id);    
    sel.remove();
}
</script> 

использовать для блока с выбором:

 display: flex;
flex-direction: column;