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?

CodePudding user response：

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:

• https://developer.mozilla.org/en-US/docs/Web/API/Element/remove

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:

• https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild

CodePudding user response：

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>