Transforming jQuery code into Javascript

Question

I have a problem similar to that : Insert text - Stack

But in my case I need the code in pure Javascript and I have no idea (novice in Prog. web) how to change from jQuery that they gave as a response.

jQuery:

$('.botao_add').click(function(){
    $(this).parent().children('select').append($('<option>', {
    value: $(this).parent().children('input:first').val(),
    text: $(this).parent().children('input:first').val()}));
});

$('.botao_del').click(function(){
    $(this).parent().children('select').children('option:selected').each(function() {
        $(this).remove();
    });
});

How would this excerpt look in pure Javascript? And how to check somehow, even in jQuery, if the data entered in the input has already been entered in the box?

Answer 1

whereas:

1. jQuery itself, at least in version 2, does not support browsers well ancient;

2. IE6, IE7 and even IE8 are getting rarer every day;

3. The work to make the code really compatible with these relics requires a good deal of work, which can be even well instructive for you;

I present the following "translation", which I tested only on Chrome. The goal was just to transcribe, literally, instruction per instruction from jQuery to a simple Javascript. I decided not to use features of the latest versions, such as querySelector and the querySelectorAll, And I didn’t bother to optimize or validate anything either. With the code in hand, you can then study the bugs that occur in the browsers where you test and then edit the answer with the solutions.

window.addEventListener("load", function() {
    var botoes_add = document.getElementsByClassName("botao_add");
    for(var i = 0; i < botoes_add.length; i++){
        botoes_add[i].addEventListener("click", function(){
            var selects = this.parentElement.getElementsByTagName("select");
            var input_first = this.parentElement.getElementsByTagName("input")[0];
            for(var j = 0; j < selects.length; j++){
                var novo_option = document.createElement("option");
                novo_option.value = input_first.value;
                novo_option.innerHTML = input_first.value;
                selects[j].appendChild(novo_option);
            }
        });
    }
    var botoes_del = document.getElementsByClassName("botao_del");
    for(var i = 0; i < botoes_del.length; i++){
        botoes_del[i].addEventListener("click", function(){
            var selects = this.parentElement.getElementsByTagName("select");
            for(var j = 0; j < selects.length; j++){
                var options = selects[j].getElementsByTagName("option");
                for(var k = 0; k < selects[j].children.length; k++){
                    if(selects[j].children[k].selected) selects[j].removeChild(selects[j].children[k]);
                }
            }
        });
    }
});

At least in Chrome 36.0.1985.125 for Linux, which I tested, I’m sure the functionality is identical at the jsFiddle you quoted.

Edit: I forgot to put my pàoprio jsFiddle, and to say that the innerHTML was chosen instead of innerText to allow compatibility with Firefox.

I hope it serves as a first step for you.

Hugs!

Answer 2

A simpler way to your problem:

function move(Origem, Destino)
{
    var opt = document.createElement("option"); 
    var valor = Origem.value;
    if(valor==""){
        alert("Informe um dado válido!"); 
        return;
    }

    opt.text = valor ;
    opt.value = valor ;
    Destino.options.add(opt);
 }

function tira(Destino)
{
    var i;
    for(i = 0; i < Destino.options.length; i++)
    { 
        if (Destino.options[i].selected && Destino.options[i].value != "")
        {
            valor=Destino.options[i].value;
            Destino.remove(Destino.selectedIndex);
        }
    }
}

Answer 3

think q if you download the development version of jquery and search what makes each function you can understand, even because jquery is done in pure js, it is just a huge library with various functions.

Example of a code "not jquery" simulating the selector $ jquery in js pure.

html

<p id="ha">lalala</p>

js

function $(par) {
    re = /^[.#]/;
    if (re.test(par)) {
        return document.querySelector(par);
    } else {
        return document.querySelectorAll(par);
    }
}

console.log($("#ha").id);

or

(function (window) {
    function $(par) {
        re = /^[.#]/;
        if (re.test(par)) {
            return document.querySelector(par);
        } else {
            return document.querySelectorAll(par);
        }
    }

    window.$ = $;
})(window);

console.log($("#ha").id);

output

ha