Добавление и / или удаление всего выпадающего списка выбора

Question

Я хочу, чтобы пользователь нажимал кнопку, чтобы иметь возможность добавить или удалить раскрывающийся список для выбора языка и уровня владения языком.Что JS.код будет работать для меня?

Я пробовал несколько разных кодов из разных источников, но безрезультатно!

function addLanguage() {
  var x = document.getElementById("dynamic-select");
  x.labels[x.labels.length] = new Label('-- Choose a Language --', '0', false, false);
}

function removeLanguage() {
  var x = document.getElementById("dynamic-select");
  x.labels[x.labels.length - 1] = null;
}

function removeAllAddedLanguages() {
  var x = document.getElementById("dynamic-select");
  x.labels.length = 0;
}

<div id="dynamic-select">
  <label for="dynamicSelect">
   <select data-placeholder="Choose a Language...">
      <option selected disabled value="">-- Choose a language --</option>
			<option value="AF">Afrikanns</option>
			<option value="SQ">Albanian</option>
			<option value="AR">Arabic</option>
			<option value="HY">Armenian</option>
			<option value="EU">Basque</option>
			<option value="BA">Bemba</option>
			<option value="BN">Bengali</option>
		</select>
	<label for="proficiency">Level of proficiency</label>
  <select name="pLevel" id="pLevel">
    <option value="fluent">Fluent</option>
    <option value="fluent">Fluent</option>
    <option value="fluent">Fluent</option>
    <option value="fluent">Novice</option>
    <option value="fluent">No knowledge</option>
  </select>
  </label>
</div>
<button onclick="addLanguage()" id="" class="action_button">Add A Language</button>
<button onclick="removeLanguage()" style="background-color: orange" class="action_button">Remove Last Added</button>
<button onclick="removeAllAddedLanguages()" style="background-color: red" class="action_button">Remove Added Languages</button>

Answer 1

Я не уверен, что вы хотите сделать это, но это добавляет новый список выбора с профессией, однако я не определял имена списков выбора, поэтому вам может понадобиться добавить его, если вы хотите опубликовать через форму.

function addLanguage() {
  var langContainer = document.getElementById('dynamic-select');
  var firstLang = document.getElementsByClassName("lang")[0];
  langContainer.append(firstLang.cloneNode(true));
}
function removeLanguage() {
  var langs = document.getElementsByClassName("lang");
  if (langs.length > 1) { 
    langs[langs.length - 1].remove();
  }
}
function removeAllAddedLanguages() {
  var langContainer = document.getElementById('dynamic-select');
  var firstLang = document.getElementsByClassName("lang")[0];
  langContainer.innerHTML = firstLang.outerHTML;
}

<div id="dynamic-select">
  <div class="lang">
    <label for="dynamicSelect">
     <select data-placeholder="Choose a Language...">
        <option selected disabled value="">-- Choose a language --</option>
        <option value="AF">Afrikanns</option>
        <option value="SQ">Albanian</option>
        <option value="AR">Arabic</option>
        <option value="HY">Armenian</option>
        <option value="EU">Basque</option>
        <option value="BA">Bemba</option>
        <option value="BN">Bengali</option>
      </select>
    </label>
    <label for="proficiency">Level of proficiency
    <select name="pLevel" id="pLevel">
      <option value="fluent">Fluent</option>
      <option value="fluent">Fluent</option>
      <option value="fluent">Fluent</option>
      <option value="fluent">Novice</option>
      <option value="fluent">No knowledge</option>
    </select>
    </label>
  </div>
</div>
<button onclick="addLanguage()" id="" class="action_button">Add A Language</button>
<button onclick="removeLanguage()" style="background-color: orange" class="action_button">Remove Last Added</button>
<button onclick="removeAllAddedLanguages()" style="background-color: red" class="action_button">Remove Added Languages</button>

Answer 2

Почему labels? Если вы правильно выбрали имя, то это работает

Я оставил ваших встроенных слушателей событий, но их также можно переместить в сценарий. Я изменил кнопки на type = button и дал селекту идентификатор и использовал это

Также у вас был какой-то нелегальный HTML (незакрытый ярлык)

// this code needs to be after the select is defined OR wrapped in an event listener
var x = document.getElementById("dynamicSelect"); 
var len = x.options.length; // default
function addLanguage() {
  var lan = prompt("Language?","");
  if (lan) {
    x.options[x.options.length] = new Option(lan,lan)
    x.selectedIndex=x.options.length-1;
  }  
}

function removeLanguage() {
  if (x.options.length > 0) x.options.length--; // or x.options.length > len
}

function removeAllAddedLanguages() {
  x.options.length = len;
  x.selectedIndex=0;
}

<div id="dynamic-select">
  <label for="dynamicSelect">Language spoken</label>
   <select id="dynamicSelect" data-placeholder="Choose a Language...">
      <option selected disabled value="">-- Choose a language --</option>
      <option value="AF">Afrikanns</option>
      <option value="SQ">Albanian</option>
      <option value="AR">Arabic</option>
      <option value="HY">Armenian</option>
      <option value="EU">Basque</option>
      <option value="BA">Bemba</option>
      <option value="BN">Bengali</option>
  </select>
  <label for="proficiency">Level of proficiency</label>
  <select name="pLevel" id="proficiency">
    <option value="fluent">Fluent</option>
    <option value="fluent">Fluent</option>
    <option value="fluent">Fluent</option>
    <option value="fluent">Novice</option>
    <option value="fluent">No knowledge</option>
  </select>
  </label>
</div>
<button type="button" onclick="addLanguage()" id="" class="action_button">Add A Language</button>
<button type="button" onclick="removeLanguage()" style="background-color: orange" class="action_button">Remove Last Added</button>
<button type="button" onclick="removeAllAddedLanguages()" style="background-color: red" class="action_button">Remove Added Languages</button>