Question

我有这个html代码

<input type="button" id="add_destination" value="add new" />

<div id="desti_div">

</div>

和这个jQuery

 var count = 0;

 $( "#add_destination" ).on( "click", function(e) {
        e.preventDefault();
         count = Math.floor(Math.random() * 78955) + 147;
    $("#desti_div").append("<div class='tmar'><div class='form-group col-md-6 getspace'><label><i class='gicon fas fa-circle'></i> New Destination</label><input class='form-control input-lg form-field' type='text' id='added_dest"+count+"' name='added_dest' placeholder='New Destinaton' ><a href='' class='gored'><span class='form-control-feedback'></span>Delete</a></div><br/></div>");

    });

        $(document).on('click', '.gored', function(e){ 
        e.preventDefault();
        field_val = $('#added_dest'+count).val();
            alert(field_val);
        $(this).parent().parent().remove();

    });

我正在使用

获取动态添加的字段的值。我有一个删除表单字段的按钮，但是在此之前，我想获取要删除的输入字段的值。

这是小提琴http://jsfiddle.net/5w2cm081/8/

当我单击删除时，我的代码获得了错误的表单字段值。如何获取要删除的值的值？

Answer 1

您需要使用“依靠删除”按钮，因为它应该知道哪个删除

您应该在附加html中编辑<a href='' class='gored' count='"+count+"'><span class='form-control-feedback'></span>Delete</a>

和

field_val = $('#added_dest'+$(this).attr('count')).val();

完整代码

var count = 0;
function appendHtml(count){
 return "<div class='tmar'><div class='form-group col-md-6 getspace'><label><i class='gicon fas fa-circle'></i> New Destination</label><input class='form-control input-lg form-field' type='text' id='added_dest"+count+"' name='added_dest' placeholder='New Destinaton' ><a href='' class='gored' count='"+count+"'><span class='form-control-feedback'></span>Delete</a></div><br/></div>"
}

$( "#add_destination" ).on( "click", function(e) {
    e.preventDefault();
     count = Math.floor(Math.random() * 78955) + 147;
$("#desti_div").append(appendHtml(count));

});
    $(document).on('click', '.gored', function(e){ 
    e.preventDefault();
    field_val = $('#added_dest'+$(this).attr('count')).val();
    alert(field_val)
    $(this).parent().parent().remove();

});

Answer 2

$(document).on('click', '.gored', function(e){ 
    e.preventDefault();
    field_val = $(this).siblings('[name="added_dest"]').val();
    alert(field_val);
    $(this).parent().parent().remove();

});

动态添加的表单字段的获取值返回错误的值

2 个答案: