Transform jQuery code into JavaScript

A simpler way to solve 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);
        }
    }
}

Considering that:

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

I present the following "translation", which I tested only on Chrome. The goal was just to transcribe, literally, per-statement instruction from jQuery for a simple JavaScript. I decided not to use features from the latest versions, such as querySelector and querySelectorAll , and I also did not bother optimizing or validating anything. With the code in hand, you can then study the bugs that occur in the browsers you test on and then edit the response to 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 on Chrome 36.0.1985.125 for Linux, which I tested, I'm sure the functionality is identical to jsFiddle you quoted .

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

I hope it will serve as a first step for you.

Hugs!

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

Example of a non-jquery code that simulates the $ selector in pure js.

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