Добавление текстовых полей html в порядке убывания JS

Question

Я пытаюсь сделать стек текстовых полей в порядке убывания при добавлении нового текстового поля.

Вот мой код:

JS:

var max_fields  = 10; //maximum input boxes allowed 
var wrapper   = $(".input_fields_wrap"); //Fields wrapper 
var add_button  = $(".add_field_button"); //Add button ID 

var x = 1; //initlal text box count 
$(add_button).click(function(e){ //on add input button click 
    e.preventDefault(); 
    if(x < max_fields){ //max input box allowed 
     x++; //text box increment 
     $(wrapper).append('<div><input type="text" class="form-control" name="mytext[]" placeholder="<Menu Name/Transaction ID/ Description>"/> <select><option ></option><option >Add</option></select><a href="#" class="remove_field"> &nbsp; Delete</a></div>'); //add input box 

    } 
}); 

$(wrapper).on("click",".remove_field", function(e){ //user click on remove text 
    e.preventDefault(); $(this).parent('div').remove(); x--; 
}) 
}); 

Я попытался с помощью метода сортировки Js, но это не сработало ....

Спасибо за помощь заранее!

Answer 1

вероятно Вы запутались с id и class как .XXX означает элемент с классом XXX, а элемент с идентификатором YYY следует использовать селектор #YYY.

Вы можете либо изменить .add_field_button к #add_field_button или изменить кнопку с идентификатором add_field_button иметь класс add_field_button как то, что я сделал в сниппет.

И если вы хотите спускаться, используйте .prepend(), чтобы последнее добавленное текстовое поле вставлялось в начало контейнера.

$(function() { 
 
var max_fields  = 10; //maximum input boxes allowed 
 
var wrapper   = $(".input_fields_wrap"); //Fields wrapper 
 
var add_button  = $(".add_field_button"); //Add button CLASS 
 

 
var x = 1; //initlal text box count 
 
$(add_button).click(function(e){ //on add input button click 
 
    e.preventDefault(); 
 
    if(x < max_fields){ //max input box allowed 
 
     x++; //text box increment 
 
     $(wrapper).prepend('<div><input type="text" class="form-control" name="mytext[]" placeholder="<Menu Name/Transaction ID/ Description>"/> <select><option ></option><option >Add</option></select><a href="#" class="remove_field"> &nbsp; Delete</a></div>'); //add input box 
 

 
    } 
 
}); 
 

 
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text 
 
    e.preventDefault(); $(this).parent('div').remove(); x--; 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<button class="add_field_button">Test</button> 
 
<div class="input_fields_wrap"></div>