Пустой массив в форме с нажатием кнопки и динамическим позиционированием ввода

Question

У меня есть форма, которую я использую для вычисления суммы и среднего числа чисел. Я использую кнопку, чтобы запустить форму, и пользователи могут добавлять дополнительные поля ввода, чтобы ввести столько значений, сколько они пожелают. Когда они нажимают кнопку «Calc», они получают предупреждение о сумме и среднем. Это очень хорошо работает. Проблема заключается в том, когда я снова нажимаю триггер, чтобы закрыть, а затем снова открыть форму, то же количество полей ввода, что и выбранный пользователем, и, несмотря на то, что они смогли очистить свои значения, я не смог удалить связанный массив , Таким образом, когда пользователь вводит значения во второй раз и пытается выполнить расчет, к этим новым добавляются прежние значения.

Кроме того, я хотел бы, чтобы динамически добавленные входы отображались один поверх другого, а для div .remove-field (или, по крайней мере, значок, который он содержит), отображались справа каждого поля ввода. Я пробовал различные отображаемые значения, позиционирование и т. Д., Но ничто не кажется последовательным.

Вот мой HTML разметка:

<button class="form-launch" data-icon="&#xe17f">AVG</button> 

<div class="form-space"> 
<form role="form" action="/wohoo" method="POST" class="form-add-remove"> 
    <label class="label">Average Calculation</label> 
    <div id="horizontal_bar"></div> 
    <div class="multi-field-wrapper"> 
    <div class="add-field"><i class="fa fa-plus-circle"></i></div> 
     <div class="multi-fields"> 
     <div class="multi-field"> 

     <input type="text" name="stuff[]" class="input-field"/> 

     <div class="remove-field"><i class="fa fa-minus-circle"></i></div> 

     </div> 
     </div> 

    </div> 

    <button type="button" class="check">Calc</button> 
</form> 
</div> 

Мой CSS:

.form-launch { 
    position: absolute; 
    top: 20px; 
    left: 20px; 
} 

.form-space { 
    opacity: 0; 
} 

.form-add-remove { 
    font-family: "DJB Chalk It Up"; 
    color: #FFF; 
    font-size: 30px; 
    width: 600px; 
    height: 300px; 
    padding: 20px; 
    border: 2px solid #FFF; 
    border-radius: 25px; 
    box-shadow: 0px 0px 10px 5px #000; 
    background: transparent url("http://mrlambertsmathpage.weebly.com/files/theme/blackboard.jpeg") repeat-y scroll left center; 
    text-align: center; 
    vertical-align: middle; 
    display: inline-flex; 
    -moz-box-pack: center; 
    justify-content: center; 
    align-items: center; 
    -moz-box-orient: vertical; 
    opacity: 1; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-left: -300px; 
    margin-top: -125px; 
    display: inline-block; 
} 

.label { 
    position: absolute; 
    top: 20px; 
    left: 20px; 
} 

#horizontal_bar { 
    position: absolute; 
    top: 60px; 
    left: 0px; 
    width: 95%; 
    height: 4px; 
    border-radius: 2px; 
    background: #00A2E8 none repeat scroll 0% 0%; 
    margin: 2.5%; 
    box-shadow: 0px 0px 6px 3px #000, 0px 0px 1px #000 inset; 
} 

.multi-field-wrapper { 
    height: 130px; 
    width: 90%; 
    padding: 20px; 
    margin-left: 0px; 
    margin-top: 80px; 
    border: 2px dashed rgba(255, 255, 255, 0.1); 
    border-radius: 10px; 
    transition: all 1.5s ease-in-out 0.5S; 
    overflow-y: scroll; 
} 

.multi-field-wrapper:hover { 
    border: 2px solid rgba(255, 255, 255, 0.1); 
    transition: all 1.5s ease-in-out 0s; 
} 

.multi-field { 
    display: inline-block; 
} 

.add-field { 
    position: absolute; 
    right: 20px; 
    bottom: 20px; 
} 

i { 
    color: #00a2e8; 
} 

.calc { 
    position: absolute; 
    left: 20px; 
    bottom: 20px; 
} 

input { 
    font-family: "Borders Divide, But Hearts Shall Conquer"; 
    border-radius: 5px; 
    border: 2px inset rgba(0, 0, 0, 0.4); 
    width: 100px; 
    text-align: right; 
    padding-right: 10px; 
} 

И мой JQuery:

var launchCount = 0; 
var arr = [], 
    sum = 0; 

$('.form-launch').click(function() { 
    launchCount++; 

    if ((launchCount % 2) == 1) { 
    $('.form-space').css('opacity', '1'); 

    // Initialize Average Form 
    $('.multi-field-wrapper').each(function() { 
     var $wrapper = $('.multi-fields', this); 
     $(".add-field", $(this)).click(function(e) { 
     $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus(); 
     }); 
     $('.multi-field .remove-field', $wrapper).click(function() { 
     if ($('.multi-field', $wrapper).length > 1) 
      $(this).parent('.multi-field').remove(); 
     }); 
    }); 

    $(".calc").click(function() { 
     $("input[type=text]").each(function() { 
     arr.push($(this).val()); 
     sum += parseInt($(this).val()); 
     }); 

     var n = arr.length; 
     var AVG = (sum/n); 
     alert(sum + "," + AVG); 
    }); 

    // End Average Form 
    } else if ((launchCount % 2) == 0) { 
    $('.form-space').css('opacity', '0'); 
    $('.form-add-remove').find("input[type=text]").val(''); 

    if ($('.multi-field', $wrapper).length > 1) { 
     $(this).parent('.multi-field').remove(); // does not seem to work! 
    } 
    arr = []; // also does not seem to work 
    } 

}); 

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

Очевидно, что это незавершенное производство. Мой jsfiddle находится здесь: http://jsfiddle.net/e3b9bopz/77/

Answer 1

Можете ли вы попробовать это?

$(".calc").click(function() { 
    $("input[type=text]").each(function() { 
    arr.push($(this).val()); 
    sum += parseInt($(this).val()); 
    }); 

    var n = arr.length; 
    var AVG = (sum/n); 
    alert(sum + "," + AVG); 
    arr = []; # How about putting your reset here? 
    sum = 0; # reinitialized the sum 
}); 

Я думаю, что вам нужно сбросить arr после сделать расчет.

Answer 2

Не совсем то, что вам нужно, но переместите $(".check").click из $('.form-launch').click и заверните все это в jquery ready.

$(function() { 
    $(".check").click(function() { 
    $("input[type=text]").each(function() { 
     arr.push($(this).val()); 
     sum += parseInt($(this).val()); 
    }); 

    var n = arr.length; 
    var AVG = (sum/n); 
    alert(sum + "," + AVG); 
    arr = []; 
    }); 
}) 

JSFiddle