How to delete a selectbox with JavaScript one by one

0

Hello ... I have a button that when clicking the button "add question" "clone" my selectbox that is like "Select Question ...". With each click it adds another one always incrementing id so that it is different. I wanted to do the opposite, like ... by clicking the "cancel" id button, delete the select's one by one. I made the code below but it just leaves hidden a select ...

$(document).ready(function () {
    $('#cancelar').click(function () {
        var 
        $('#3').html('');  // Excluindo pelo id
        $('#3').hide();
    });
});

JavaScript and HTML that adds the selectbox

$(document).ready(function () {
    var x = 1
    $('#addpergunta').click(function () {
        var itemCont = $("#itemCont").val();
        var novoItem = $("#1").clone();

        novoItem.attr("id", itemCont).attr("name", itemCont);

        $("#perguntas").append("<br />");
        $("#perguntas").append(novoItem);
        itemCont++;
        $("#itemCont").val(itemCont);
    });
});
<input type="hidden" id="itemCont" value="2" />
<div class="col-md-6" id="perguntas">
  <select class="form-control" name="1" id="1">
    <option value="0">Selecione a Pergunta...</option>
  </select>
</div>

<div class="form-group col-md-5">
  <div class="col-md-offset-4 col-md-9">
    <button type="submit" id="incluir" class="btn btn-default" style="height:35px; width:70px;">Incluir</button>
    <button type="button" id="addpergunta" class="btn btn-success" style="height:35px;" title="Adicionar Pergunta">
      <span class="glyphicon glyphicon-plus"></span>
    </button>
    <button type="button" id="cancelar" class="btn btn-danger" style="height:35px;" title="Cancelar">
      <span class="glyphicon glyphicon-ban-circle"></span>
    </button>
  </div>
</div>
    
asked by anonymous 04.10.2016 / 22:33

2 answers

0

I decided to do this ...

var perguntaId = 0;
$(document).ready(function () {
    $('#addpergunta').click(function () { 
        var itemCont = $("#itemCont").val();
        var novoItem = $("#pergunta_1").clone();
        novoItem.attr("id", 'pergunta_' + itemCont);

        perguntaId = itemCont;

        $("#perguntas").append('<br />');
        $("#perguntas").append(novoItem);
        itemCont++;
        $("#itemCont").val(itemCont);
    });
});

$(document).ready(function () {
    $('#remover').click(function () {
        console.log(perguntaId);
        if (perguntaId > 1) {
            $('br').last().remove();
            $('#pergunta_' + perguntaId).remove();
            perguntaId--;
        }
    });
});
    
06.10.2016 / 22:39
0

If you are able to get a list with each "select" element you created, use the $.fn.remove method. This will remove every element (from the page) you have in an instantiated object of the jQuery class.

$("#perguntas select").remove();

This would do the same:

$("#perguntas select").each( 
/* novo estilo de função */
() =>
    /* statement único */
    this.parentNode.removeChild(this)
);

Explanation:

  • iterates every element of a jQuery object;
  • for each element, a removal of the HTML page.

Remembering: you will not lose references to your elements when you remove them, they will be removed only from the page. When an element (which is an object) is no longer used, the browser removes it automatically, this is because of memory management ( garbage collection ).

So let's suppose we have a code where we have an HTML element stored in an object or variable:

var el = document.getElementById("id");

When removed from the page,

el.parentNode.removeChild(el);

el will still be an HTML element (in modern browsers, all HTML elements would be objects, but in older browsers like MS Internet Explorer 6 an HTML element would be more native and could not get method manipulation because the HTMLElement would not exist).

Edit : I forgot you want to remove one by one element. That will depend on the order. If you want to remove the primary element you can use the $.fn.first method that will return the first element of your jQuery object, and in this way you will not need to know if the element exists since jQuery performs an action for each element that has in the pocket only if it exists (loop), then you can remove the element (s) contained in the new object.

$("#perguntas select").first().remove();

Or, if you want to remove it in the order below:

$("#perguntas select").last().remove();
    
04.10.2016 / 22:55