I am dynamically generating input fields with a delete button "x" that allows users to remove the field. The layout looks similar to this
Here is the Javascript code:
$(document).ready(function() {
// When the add_button is clicked
$('#add_correct_answer').click(function() {
// Select the container (already created)
var container = $('.buttons-fields-correct');
// Create an input wrapper (input tag + delete button), and append it to `container`
var input_wrapper = $('<div>', { class: 'input-wrapper' }).appendTo(container);
// Create an input tag, and append it to the input wrapper
var input = $('<input>', { name: 'task[correct_answers][]', type: 'text' }).appendTo(input_wrapper);
// Create the remove button, append it to the input wrapper, and set up a click callback to remove the input wrapper if pressed.
var remove = $('<span>', { text: 'x' }).appendTo(input_wrapper).click(function() {
input_wrapper.remove();
});
});
Related HTML:
<%= label :form_type, t(:add_correct_answers) %>
<div class="buttons-wrapper">
<%= button_tag t(:add_field), id: 'add_correct_answer', type: 'button' %>
<div class="buttons-fields-correct">
<div>
</div>
</div>
</div>
I am trying to assign a class to the "x" button so that I can customize its appearance and position, such as placing it inside the input field on the right side.