0

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?

Tyler2P
  • 2,324
  • 26
  • 22
  • 31
Andrus
  • 26,339
  • 60
  • 204
  • 378
  • 1
    You might want to add your HTML code also. To remove using plain JS: document.getElementById(id).remove(); Similar to jquery. – SScotti Dec 29 '21 at 23:20
  • Form contains simple input and select elements. Tab key moves focus to next element. How to set focus to next element in tab order on enter ? Enter key in select should act like Tab key. Should `if (document.getElementById(id)) document.getElementById(id).remove();` used to remove since in first call element does not exist ? Jquery handles this automatically. Will plain javascript require using `if` for this ? – Andrus Dec 29 '21 at 23:25
  • If the element may not exist, it's better to use the [`if statement`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) to prevent any errors being thrown. – Tyler2P Dec 29 '21 at 23:34

2 Answers2

0

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:

Tyler2P
  • 2,324
  • 26
  • 22
  • 31
  • Thank you. Great. Can you answer to the main question also: how to move focus to next element on tab order on enter just like pressing tab key. – Andrus Dec 29 '21 at 23:42
0

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>
SScotti
  • 2,158
  • 4
  • 23
  • 41
  • Thank you. This requires pressing enter twice: first enter closes select element and only second enter moves focus to next element. How to fix this so that first enter selects and moves focus to next element. Other element or bootstrap 5 component can used instead of select if this helps. – Andrus Dec 30 '21 at 11:57
  • Posted this as separate question in https://stackoverflow.com/questions/70535719/how-to-move-focus-to-next-field-if-enter-is-pressed-in-select – Andrus Dec 30 '21 at 19:07