html form contains input elements.
Javascript and jquery code are used to create select element at runtime and inserting it after element elemand assigning Bootstrap 5 class to it:
let selectArray = ["Intv Scheduled", "Selected", "Rejected", "On Hold"];
let id = 'Customer';
$('#' + id).remove();
var selectList = document.createElement("select");
selectList.id = selectList.name = id;
selectList.className = "form-select";
elem.after(selectList);
for (var i = 0; i < selectArray.length; i++) {
var option = document.createElement("option");
option.value = option.text = selectArray[i];
selectList.appendChild(option);
}
selectList.focus();
User selects item using enter key. After pressing enter select element is still focused.
How to move focus to next element in form if enter is pressed?
How to replace $('#' + id).remove() with plain JavaScript so the jQuery dependency can be removed?
There are two pure JavaScript methods for replacing the $(...).remove() function in jQuery.
Solution One - The .remove() function.
let id = "";
// Find the element then remove it
document.getElementById(id).remove();
Reference:
Solution Two - Finding the parent node then using the .removeChild() method.
let id = "";
// Find the element mentioned
let element = document.getElementById(id);
// Find the elements parent node
let parent = element.parentNode;
// Remove the element from the parent
parent.removeChild(element);
Reference:
Kind of hard to guess what you are asking for.
There are already multiple suggestions and answers available on SO.
Enter key press behaves like a Tab in Javascript
document.addEventListener('keydown', function (e) {
if (event.keyCode === 13 && event.target.nodeName == 'SELECT') {
var form = event.target.closest('form');
var index = Array.prototype.indexOf.call(form, event.target);
form.elements[index + 1].focus();
return false;
}
});<form>
<div id = "Customer">Customer</div>
<select>
<option value = "">Test</option>
<option value = "">Test</option>
</select>
<input type = "text">
<select>
<option value = "">Test</option>
<option value = "">Test</option>
</select>
<select>
<option value = "">Test</option>
<option value = "">Test</option>
</select>
<input type = "text">
</form>