提交后如何清除數組

Question

我想在表單提交后清除數組。 我想防止jquery自動完成中的重復選擇，在這種情況下，可以將預選擇的值保存在數組中，以防止重新選擇。

通過刪除選定的行，它應該從數組中刪除選定的值。

 $(document).ready(function() { inArray = []; }); $('#formSubmit').submit(function(e) { e.preventDefault(); $("#formSubmit")[0].reset(); }); //autocomplete script $(document).on('focus', '.search', function() { let type = $(this).data('type'); $(this).autocomplete({ source: [{ label: 1, value: 1, data: { t_id: 1, Fee: 10 } }, { label: 2, value: 2, data: { t_id: 2, Fee: 20 } }], autoFocus: true, minLength: 1, select: function(event, ui) { let id_num = $(this).attr('id').substring(5); var element = ui.item.data.Fee; if (inArray.indexOf(element) !== -1) { alert('duplicate error'); return; } inArray.push(element); $(this).val(ui.item.value); $('#fee_' + id_num).val(ui.item.data.Fee); $('#total').val(ui.item.data.Fee); //$(this).attr('data-type', ui.item.type); return false; }, }); }); var i = $('table#first tr').length; $("#more").on('click', function() { html = '<tr>'; html += '<td><input type="text" data-type="type" id="test_' + i + '" class="search" placeholder="Enter 1 or 2 only"> </td>'; html += '<td><input type="number" id="fee_' + i + '" class="fee" placeholder="Fee"></td>'; html += '<td><p class="delete"> delete </p> </td>'; html += '</tr>'; $('table#first').append(html); i++; }); $(document).on("click", ".delete", function() { $(this).parents("tr").remove(); }); 

 #button { margin: 50px; } 

 <link href="https://code.jquery.com/ui/1.11.4/themes/ui-darkness/jquery-ui.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <!--hidden div--> <form id="formSubmit" method="post"> <table id="first"> <thead> <tr> <th>Name</th> <th>Fee</th> </tr> </thead> <tbody> <tr> <td><input type="text" data-type="type" id="test_1" class="search" placeholder="Enter 1 or 2 only"></td> <td><input type="number" id="fee_1" class="fee" placeholder="Fee"></td> <td><a id="more"> More Row </a></td> </tr> </tbody> </table> <button type="submit" id="button"> submit </button> </form> 

Answer 1

您已經有一個inArray聲明的inArray變量。 因此， onSumbit您可以清空該數組。 要刪除數組中的特定元素，請檢查JS代碼中的注釋。

 $(document).ready(function() { inArray = []; }); $('#formSubmit').submit(function(e) { e.preventDefault(); $("#formSubmit")[0].reset(); inArray = []; }); //autocomplete script $(document).on('focus', '.search', function() { let type = $(this).data('type'); $(this).autocomplete({ source: [{ label: 1, value: 1, data: { t_id: 1, Fee: 10 } }, { label: 2, value: 2, data: { t_id: 2, Fee: 20 } }], autoFocus: true, minLength: 1, select: function(event, ui) { let id_num = $(this).attr('id').substring(5); var element = ui.item.data.Fee; if (inArray.indexOf(element) !== -1) { alert('duplicate error'); return; } inArray.push(element); $(this).val(ui.item.value); $('#fee_' + id_num).val(ui.item.data.Fee); $('#total').val(ui.item.data.Fee); //$(this).attr('data-type', ui.item.type); return false; }, }); }); var i = $('table#first tr').length; $("#more").on('click', function() { html = '<tr>'; html += '<td><input type="text" data-type="type" id="test_' + i + '" class="search" placeholder="Enter 1 or 2 only"> </td>'; html += '<td><input type="number" id="fee_' + i + '" class="fee" placeholder="Fee"></td>'; // DATA ID IS USED TO GET "VALUE" IN TR TO BE REMOVED html += '<td><p class="delete" data-id="fee_' + i + '"> delete </p> </td>'; html += '</tr>'; $('table#first').append(html); i++; }); $(document).on("click", ".delete", function() { // GETTING VALUE IN INPUT USING DATA-ID ATTRIBUTE let rem = $('#'+$(this).attr('data-id')).val(); // FINDING INDEX OF VALUE IN ARRAY let index = inArray.indexOf(+rem); if(index > -1) { // IF VALUE IS IN ARRAY REMOVE IT FROM ARRAY inArray.splice(index, 1); } // FINALLY REMOVE TR FROM DOM $(this).parents("tr").remove(); }); 

 #button { margin: 50px; } 

 <link href="https://code.jquery.com/ui/1.11.4/themes/ui-darkness/jquery-ui.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <!--hidden div--> <form id="formSubmit" method="post"> <table id="first"> <thead> <tr> <th>Name</th> <th>Fee</th> </tr> </thead> <tbody> <tr> <td><input type="text" data-type="type" id="test_1" class="search" placeholder="Enter 1 or 2 only"></td> <td><input type="number" id="fee_1" class="fee" placeholder="Fee"></td> <td><a id="more"> More Row </a></td> </tr> </tbody> </table> <button type="submit" id="button"> submit </button> </form>