удалить ввод с помощью JavaScript

Question

У меня проблема на уровне кода javascript, на самом деле, я хочу, чтобы при выборе option = apartment показывалось 3 входных текста, а если я щелкну после option = home, удаляется 3 входных текста. Но мой код не удаляет 3 ввода, если я выбрал house.

document.getElementById('contrat').onchange = function() {
  if (this.value == 'appartement') {
    console.log('appartement');
    var new_input1 = document.createElement('input');
    var new_input2 = document.createElement('input');
    var new_input3 = document.createElement('input');

    new_input1.type = "text";
    new_input1.id = 'ascenseur';
    new_input1.name = 'ascenceur';
    new_input1.placeholder = 'oui/non';
    new_input1.setAttribute("class", "form-control");

    new_input2.type = "text";
    new_input2.id = 'code';
    new_input2.name = 'code';
    new_input2.placeholder = 'code/interphone';
    new_input2.setAttribute("class", "form-control");

    new_input3.type = "text";
    new_input3.id = 'porte';
    new_input3.name = 'porte';
    new_input3.placeholder = 'la porte';
    new_input3.setAttribute("class", "form-control");

    document.getElementById('champ2').innerHTML = "";
    document.getElementById('champ3').innerHTML = "";
    document.getElementById('champ4').innerHTML = "";

    document.getElementById('champ2').appendChild(new_input1);
    document.getElementById('champ3').appendChild(new_input2);
    document.getElementById('champ4').appendChild(new_input3);
  }
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="form-group">
  <label>Logement* </label>
  <select id="contrat" class=form-control name="logement">
    <option>--------</option>
    <option value="appartement">Appartement</option>
    <option value="maison">Maison</option>
    <option value="autre">Autre</option>
  </select>
</div>
<div class="form-group">
  <div id="champ2"></div>
  <div id="champ3"></div>
  <div id="champ4"></div>
</div>

Answer 1

Добавьте дополнительно, если $(this).val() === 'maison', чтобы очистить при выборе этой опции. Также изменил свой простой код Javascript на jQuery, чтобы показать вам, как это делается, поскольку вы пометили свой вопрос с помощью jQuery.

Как сказано в комментариях, вы можете захотеть просто скрыть и показать элементы. Таким образом, значение входа не теряется при изменении выбора.

$('#contrat').on('change', function() {
  if ($(this).val() === 'appartement') {
    console.log('appartement');
    var $new_input1 = $('<input>');
    var $new_input2 = $('<input>');
    var $new_input3 = $('<input>');

    $new_input1.attr('type', 'text')
      .attr('type', 'ascenseur')
      .attr('name', 'ascenceur')
      .attr('placeholder', 'oui/non')
      .attr("class", "form-control");

    $new_input2.attr('type', 'text')
      .attr('type', 'code')
      .attr('name', 'code')
      .attr('placeholder', 'code/interphone')
      .attr("class", "form-control");

    $new_input3.attr('type', 'text')
      .attr('type', 'porte')
      .attr('name', 'porte')
      .attr('placeholder', 'la porte')
      .attr("class", "form-control");

    $('#champ2').empty();
    $('#champ3').empty();
    $('#champ4').empty();

    $('#champ2').append($new_input1);
    $('#champ3').append($new_input2);
    $('#champ4').append($new_input3);
  }
  else if($(this).val() === 'maison') {
    console.log('maison');
    $('#champ2').empty();
    $('#champ3').empty();
    $('#champ4').empty();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="form-group">
  <label>Logement* </label>
  <select id="contrat" class=form-control name="logement">
    <option>--------</option>
    <option value="appartement">Appartement</option>
    <option value="maison">Maison</option>
    <option value="autre">Autre</option>
  </select>
</div>
<div class="form-group">
  <div id="champ2"></div>
  <div id="champ3"></div>
  <div id="champ4"></div>
</div>

Answer 2

Все, что вам нужно, это проверить, если maison

Демо: http://jsfiddle.net/sfr3wb2p/1/

  if (this.value == 'maison') {
    document.getElementById('champ2').innerHTML = "";
    document.getElementById('champ3').innerHTML = "";
    document.getElementById('champ4').innerHTML = "";  
  }