我有三个输入字段和一个按钮,当我单击按钮时,值应该附加到下一个工作完美的输入字段。但问题是,当我单击时,我有一个删除按钮以及附加的元素按钮必须删除特定值,但它会删除所有内容,这是我的代码,
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)
答案 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()});