get child id from parent javascript onclick

Question

I have the script bellow and i want to get the id of the child removed

 <div class="right respleft">
        <div class="section-title" id="divin">Ajout d'un champ</div>
        <form class="tiny_form" id="form-step2">
            <input type="text" id="fiel" placeholder="Nom du champ" /><br/>
    <select class="form-control" id="champs">
</select>
         <a href="#" id="add_btn" class="delete"><i class="fa fa-plus"></i></a><br/>
            <div id="extender"></div>

        </form>

    </div>

    <div class="sep seppage"></div>

    <div class="clear"></div>

    <div id="bottom-submit" class="inner clear">
        <input type="submit" class="page-next center btn btn-lg btn-default" value="Créer" />
    </div>

{% endblock %}

{% block javascripts %}
    <script>

        //add input
        $('a#add_btn').click(function () {
            var x = document.getElementById("fiel");
            var selected= x.value;
            var c = document.getElementById("champs");
            // var option = document.createElement("option");
            var strUser = document.getElementById("champs").value;
            var valChamps=document.getElementById("fiel").value;
            $('<p><input type="text" class="highlight_orange" name="items[]" id="' + strUser+ '" value="' + valChamps+ '" />' +
                    '<a class="delete" href="#step2" id="' + strUser + '"><i class="fa fa-trash-o"></i></a></p>').fadeIn("slow").appendTo('#extender');

            c.remove(c.selectedIndex);
            i++;
            return false;
        });


        //fadeout selected item and remove
        $("#form-step2").on('click', '.delete', function () {

            var item = $(this).closest('input');
            var id = item.attr('id');
            $(this).parent().fadeOut(300, function () {

                $(this).empty();
                return false;
            });
        });


        function addList(){
    var select = document.getElementById("champs");
    for(var i = 100; i > 0; --i) {
    var option = document.createElement('option');
    option.text =  'champ libre '+i;
        option.value =i;
    select.add(option, 0);
    }
    }
addList();

    </script>

my problems is how to get the id of the removed input text after clicking on remove button.

this is picture of the output output

Thanks for your helps

Answer 1

You can use siblings method to get the id of input element

//fadeout selected item and remove
$("#form-step2").on('click', '.dynamic-link', function () {
    var myId = $(this).siblings('input[type=text]').attr('id');
    alert(myId)
    $(this).parent().fadeOut(300, function () {

        $(this).empty();
        return false;
    });
});

Answer 2

You can use getAttribute() function:

// your stuff     
var myId = c.getAttribute("id");
c.remove(c.selectedIndex);
// more stuff

EDIT

Maybe you need it here:

//fadeout selected item and remove
$("#form-step2").on('click', '.delete', function () {

    $(this).parent().fadeOut(300, function () {

        var myId = $(this).attr('id');

        $(this).empty();
        return false;
    });
});

Be more specific please

EDIT2

That's the solution:

//fadeout selected item and remove
$("#form-step2").on('click', '.delete', function () {

    $(this).parent().fadeOut(300, function () {

        var myId = $(this).find('input[type=text]').attr('id');

        $(this).empty();
        return false;
    });
});

See it working: http://jsfiddle.net/vWPJf/57/