使用jquery使用onclick事件删除附加元素

时间:2015-03-03 05:34:56

标签: jquery html append

我有三个输入字段和一个按钮,当我单击按钮时,值应该附加到下一个工作完美的输入字段。但问题是,当我单击时,我有一个删除按钮以及附加的元素按钮必须删除特定值,但它会删除所有内容,这是我的代码,

JS:

var ins_add_Gst_Name    =   $("#ins-add-guest-name").val();
var ins_add_Gst_Age     =   $("#ins-guest-age").val();
var ins_add_Gst_rel     =   $("#ins-guest-relation").val();
if (ins_add_Gst_Name != '') {

                    list_name           =   $("#ins-add-guest-name-disp").append('<input class="form-control input-md" value="'+ins_add_Gst_Name+'" id="ins-add-guest-name-disp">').append('<br />').append('<br />');
                    list_reln           =   $("#ins-guest-relation-disp").append('<input class="form-control input-md" value="'+ins_add_Gst_rel+'" id="ins-guest-relation-disp">').append('<br />').append('<br />');
                    list_age            =   $("#ins-guest-age-disp").append('<input class="form-control input-md" value="'+ins_add_Gst_Age+'" id="ins-guest-age-disp">').append('<br />').append('<br />'); 
                    list_btns           =   $("#ins-guest-btn-disp").append('<span class="glyphicon glyphicon-remove" >').append('<br />').append('<br />'); 

}
$(".glyphicon-remove").click(function() {
                    var sample_name = $(this).parents("form").children("#ins-guest-name").children("#ins-add-guest-name-disp").html("");
var sample_reln = $(this).parents("form").children("#ins-guest-relation").children("#ins-guest-relation-disp").html("");
                    var sample_age  = $(this).parents("form").children("#ins-guest-age").children("#ins-guest-age-disp").html("");
});

HTML:

 <div class="row">
        <form class="form-inline">
        <div class="form-group">
        <div class="col-md-2">Guest Name</div>
        <div class="col-md-4"><input class="form-control input-md" id="ins-add-guest-name" name="ins-add-guest-name" placeholder="Guest Name" value="" required autofocus></div>
        </div>
        <div class="form-group">
        <div class="col-md-2">Relation</div>
        <div class="col-md-4"><input class="form-control input-md" id="ins-guest-relation" name="ins-guest-relation" placeholder="Relation Ship" value="" required autofocus></div>
        </div>
        <div class="form-group">
        <div class="col-md-2">Age</div>
        <div class="col-md-4" ><input class="form-control input-md" id="ins-guest-age" name="ins-guest-age" placeholder="Age" value="" required autofocus></div>
        </div>
        <div class="form-group">
        <div class="col-md-2">
        <button type="button" class="btn btn-primary btn-sm" name='ins-add-save-guest' id='ins-add-save-guest' value="Save Updates">Save Details</button>
        </div>
        </div>
        </form>
        </div>

这是我在显示附加元素的内容:

  <div class="row" id="Welcome" >

        <form class="form-inline" >
        <div class="form-group" id="ins-guest-name">
        <div class="col-md-4" id="ins-add-guest-name-disp"></div>
        </div>
        <div class="form-group" id="ins-guest-relation">
        <div class="col-md-4" id="ins-guest-relation-disp" ></div>
        </div>
        <div class="form-group" id="ins-guest-age">
        <div class="col-md-4"  id="ins-guest-age-disp" ></div>
        </div>
        <div class="form-group">
        <div class="col-md-4"  id="ins-guest-btn-disp" ></div>
        </div>
        </form>
        </div>

我需要一个解决方案,比如我单击按钮时需要删除按下特定按钮的元素

即,

<input value="R" id="s"> <input value="B"><input value="23"> <button>
<input value="H" id="K"> <input value="M"><input value="55"> <button>

当我单击第一个按钮时,它应该删除属于特定按钮的所有元素。

所以结果应该是,

<input value="H" id="K"> <input value="M"><input value="55"> <button>   

我对jquery很新,任何帮助都会非常感激

编辑:

这是链接
           (jsfiddle.net/jy664t5L)

1 个答案:

答案 0 :(得分:0)

嘿Vishnu根据你的最后两行,你的代码有点令人困惑

"<input value="R" id="s"> <input value="B"><input value="23"> <button>
<input value="H" id="K"> <input value="M"><input value="55"> <button>"

你可以这样做

<div><input value="R" id="s"> <input value="B"><input value="23"> <button>  </div>
<div><input value="H" id="K"> <input value="M"><input value="55"> <button></div>

$("button").click(function() {$(this).parent().remove()});