JQuery - удалить последний добавочный элемент

Question

Я не знаком с JQuery ни малейшим образом, хотя это и есть задача вещей, которые мне нужно изучить. В настоящее время у меня есть проект, над которым я работаю, для которого требуется функция добавления/удаления, аналогичная тому, что находится в счете-фактуре.

Я хотел бы иметь возможность добавить «Удалить» функцию последнего пункта, приложенном упаковывают ошибки получить сделал и т.д.

$(document).ready(function() { 
    var currentItem = 1; 
    $('#addnew').click(function(){ 
    currentItem++; 
    $('#items').val(currentItem); 
var strToAdd = '<br>Product: <select class="form" name="Product'+currentItem+'" id="product'+currentItem+'" ><option value="Aramax Classic Tobacco">Aramax Classic Tobacco</option><option value="Aramax Energy Drink">Aramax Energy Drink</option></select> Nicotine: <select class="form" name="nicotine'+currentItem+'" id="nicotine'+currentItem+'"> <option value="N/A">n/a</option><option value="3mg">3mg</option><option value="6mg">6mg</option><option value="12mg">12mg</option></select> Quantity:<input class="form3" name="qty'+currentItem+'" id="qty'+currentItem+'" type="number" /><br>'; 
    $('#data').append(strToAdd); 

    }); 

}); 
$('#delete').on('click', function() { 
$('#items').parents("br").remove(); 

}); 

//]]> 
</script><div class="form2"> 
<form method="POST" action="invoicereg.php" id="data" name="sub"> 
    Product: 
    <select class="form" name="product1" id="product1"> 
     <option value="Aramax Classic Tobacco">Aramax Classic Tobacco</option> 
     <option value="Aramax Energy Drink">Aramax Energy Drink</option> 
    </select> 
    Nicotine: 
    <select class="form" name="nicotine1" id="nicotine1"> 
     <option value="N/A">n/a</option> 
     <option value="3mg">3mg</option> 
     <option value="6mg">6mg</option> 
     <option value="12mg">12mg</option> 
    </select> 
     Quantity:<input class="form3" type="number" id="qty1" name="qty1"></input><br> 

    </form> 
    <br> 
    <input class="button" type="button" id="addnew" name="addnew" value="Add new item" /> 
    <input type="hidden" form="data" id="items" name="items" value="1" /> 
    <input class="button" type="button" id="delete" name="delete" value="Remove" /> 
    <input class="button" type="submit" form="data" value="SUBMIT"> 
    </div> 
</div> 
</body> 
</html> 

Если кто-нибудь может показать и/или объяснить мне, как это делается это будет будем очень благодарны. С уважением

Answer 1

Я расколол содержимое вашей формы и контента, добавляемого с помощью <div>.

Затем вы можете сделать $('#data > div').last().remove();

#data это идентификатор формы.

#data > div выберет все <div>, что является первым ребенком вашего form.

.last() выбирает последний элемент.

Примечание, если ваш хотел бы сохранить по крайней мере 1 элемент в вашей форме вы можете сделать это:

if ($('#data > div').length > 1) { 
    $('#data > div').last().remove(); 
} 

$(document).ready(function() { 
 
    var currentItem = 1; 
 
    $('#addnew').click(function(){ 
 
    currentItem++; 
 
    $('#items').val(currentItem); 
 
var strToAdd = '<div><br>Product: <select class="form" name="Product'+currentItem+'" id="product'+currentItem+'" ><option value="Aramax Classic Tobacco">Aramax Classic Tobacco</option><option value="Aramax Energy Drink">Aramax Energy Drink</option></select> Nicotine: <select class="form" name="nicotine'+currentItem+'" id="nicotine'+currentItem+'"> <option value="N/A">n/a</option><option value="3mg">3mg</option><option value="6mg">6mg</option><option value="12mg">12mg</option></select> Quantity:<input class="form3" name="qty'+currentItem+'" id="qty'+currentItem+'" type="number" /><br></div>'; 
 
    $('#data').append(strToAdd); 
 

 
    }); 
 

 
}); 
 
$('#delete').on('click', function() { 
 
    if ($('#data > div').length > 1) { 
 
    $('#data > div').last().remove(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
</script><div class="form2"> 
 
<form method="POST" action="invoicereg.php" id="data" name="sub"> 
 
    <div> 
 
    Product: 
 
    <select class="form" name="product1" id="product1"> 
 
     <option value="Aramax Classic Tobacco">Aramax Classic Tobacco</option> 
 
     <option value="Aramax Energy Drink">Aramax Energy Drink</option> 
 
    </select> 
 
    Nicotine: 
 
    <select class="form" name="nicotine1" id="nicotine1"> 
 
     <option value="N/A">n/a</option> 
 
     <option value="3mg">3mg</option> 
 
     <option value="6mg">6mg</option> 
 
     <option value="12mg">12mg</option> 
 
    </select> 
 
     Quantity:<input class="form3" type="number" id="qty1" name="qty1"></input><br> 
 
</div> 
 
    </form> 
 
    <br> 
 
    <input class="button" type="button" id="addnew" name="addnew" value="Add new item" /> 
 
    <input type="hidden" form="data" id="items" name="items" value="1" /> 
 
    <input class="button" type="button" id="delete" name="delete" value="Remove" /> 
 
    <input class="button" type="submit" form="data" value="SUBMIT"> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

Answer 2

использовать некоторые по всем Див как <div class="items">yourcode</div> .Затем применять с $('.items').last().remove()

$(document).ready(function() { 
 
    var currentItem = 1; 
 
    $('#addnew').click(function() { 
 
    currentItem++; 
 
    $('#items').val(currentItem); 
 
    var strToAdd = '<br><div class="items">Product: <select class="form" name="Product' + currentItem + '" id="product' + currentItem + '" ><option value="Aramax Classic Tobacco">Aramax Classic Tobacco</option><option value="Aramax Energy Drink">Aramax Energy Drink</option></select> Nicotine: <select class="form" name="nicotine' + currentItem + '" id="nicotine' + currentItem + '"> <option value="N/A">n/a</option><option value="3mg">3mg</option><option value="6mg">6mg</option><option value="12mg">12mg</option></select> Quantity:<input class="form3" name="qty' + currentItem + '" id="qty' + currentItem + '" type="number" /><br></div>'; 
 
    $('#data').append(strToAdd); 
 

 
    }); 
 

 
}); 
 
$('#delete').on('click', function() { 
 
    $('.items').last().remove() 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form2"> 
 
    <form method="POST" action="invoicereg.php" id="data" name="sub"> 
 
    <div class="items"> 
 
    Product: 
 
    <select class="form" name="product1" id="product1"> 
 
     <option value="Aramax Classic Tobacco">Aramax Classic Tobacco</option> 
 
     <option value="Aramax Energy Drink">Aramax Energy Drink</option> 
 
    </select> 
 
    Nicotine: 
 
    <select class="form" name="nicotine1" id="nicotine1"> 
 
     <option value="N/A">n/a</option> 
 
     <option value="3mg">3mg</option> 
 
     <option value="6mg">6mg</option> 
 
     <option value="12mg">12mg</option> 
 
    </select> 
 
    Quantity: 
 
    <input class="form3" type="number" id="qty1" name="qty1"></input> 
 
    <br> 
 
</div> 
 
    </form> 
 
    <br> 
 
    <input class="button" type="button" id="addnew" name="addnew" value="Add new item" /> 
 
    <input type="hidden" form="data" id="items" name="items" value="1" /> 
 
    <input class="button" type="button" id="delete" name="delete" value="Remove" /> 
 
    <input class="button" type="submit" form="data" value="SUBMIT"> 
 
</div> 
 
</div>

Answer 3

Было бы лучше, чтобы обернуть добавленные элементы в DIV, что-то вроде:
<div class="added-item"></div>
затем при нажатии на кнопку удаления вы должны найти все эти дополнительные элементы
var added_items = $('.added-item');
, а затем удалить последний элемент
added_items.last().remove();