javascript - 从父级 javascript onclick 获取子级 id

Question

我有下面的脚本，我想删除 child 的 id

 <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>

我的问题是如何在单击删除按钮后获取删除的输入文本的 id。

这是输出的图片 output

感谢您的帮助

Answer 1

可以使用siblings方法获取输入元素的id

//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;
    });
});