从父javascript onclick获取子ID

时间:2015-08-27 12:21:55

标签: javascript jquery parent-child

我有脚本,我想删除孩子的身份

 <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

感谢您的帮助

2 个答案:

答案 0 :(得分:1)

您可以使用siblings方法获取input元素的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;
    });
});

答案 1 :(得分:0)

您可以使用getAttribute()功能:

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

修改

也许你需要它:

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

请更具体一点

EDIT2

这就是解决方案:

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

看到它正常工作:http://jsfiddle.net/vWPJf/57/