如何删除我的按钮之前的输入元素？ [英] How to remove the input element before my button?
本文介绍了如何删除我的按钮之前的输入元素？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想删除我的 x 旁边的input元素，但实际上它删除了 x ，而不是 input ，因为我不知道如何在<$ c $>之前删除 input data-console =data-hide =falsedata-lang =jsdata-hide =false> $ truedata-babel =false>
.form-style-2 {max-width：600px; padding：10px 10px 2px 10px;字体：13px Arial，Helvetica，sans-serif;背景：rgba（blue，0.8）;}。form-style-2-heading {color：black; font-weight：bold; font-style：italic; border-bottom：2px solid #ddd; margin-bottom：20px; font-size：15px; padding-bottom：3px;}。form-style-2 label {display：table;宽度：100％; font-size：15px;}。form-style-2 label> span {color：black; font-weight：bold; padding-right：5px;宽度：25％;显示：table-cell;}。form-style-2 span.required {color：red;}。form-style-2 a {display：block;}。form-style-2 .removeField {display：inline;}。 form-style-2 input.input-field {border：1px solid＃c2c2c2; border-radius：3px;盒子尺寸：边框; display：table-cell; margin：4px;大纲：中等无;填充：7px; form-style-2 input.env，input.vol {width：75％！important;}。form-style-2 input.nameModif {width：50％！important;}。form-style -2 .input-field：focus {border：1px solid＃0C0;}。form-style-2 input.saveModif {border：none; padding：5px 5px 5px 5px;背景：绿色;颜色：#fff; box-shadow：1px 1px 4px #DADADA; border-radius：3px; margin-right：10px;}。form-style-2 input.saveModif：hover {background：green; color：#fff;}。form-style-2 input.cancelModif {border：none; padding：5px 5px 5px 5px;背景：红色;颜色：#fff; box-shadow：1px 1px 4px #DADADA; border-radius：3px;}。form-style-2 input.cancelModif：hover {background：red; color：#fff;}
< script src = https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script><div class =form-style-2> < div class =form-style-2-heading>< / div> < form action =method =post> <标签> < span>容器名称< span class =required> *< / span> < /跨度> < input type =textclass =input-field nameModifvalue =required /> < /标签> < label id =labelEnv> < span>环境< / span> < input type =textclass =input-field envvalue =delete me/><！ - < a class =removeFieldaria-expanded =false>< i class =fa fa-times>< / i>< / a> - > < button class =removeFieldtype =button> x< / button> < input type =textclass =input-field envvalue =or me/><！ - < a class =removeFieldaria-expanded =false>< i class =fa fa-times>< / i>< / a> - > < button class =removeFieldtype =button> x< / button> < input type =textclass =input-field envvalue =or even me/><！ - < a class =removeFieldaria-expanded =false>< i class =fa fa-times>< / i>< / a> - > < button class =removeFieldtype =button> x< / button> < a class =addEnvaria-expanded =false> +< i class =fa fa-plus>< / i>< / a> < /标签> <标签> <跨度>&安培; NBSP;< /跨度> < input class =saveModiftype =buttonvalue =Save/> < input class =cancelModiftype =buttonvalue =Cancel/> < /标签> < /形式> < / div>
解决方案
<您可以使用JQuery的prev函数：
$（e.target）.prev（'input'）。remove（） ;
找到当前元素前面最接近的'x'元素（在这种情况下是输入）。
同样，还有一个'下一个'功能。
I want to remove the input element next to my x but actually it deletes the x and not the input because I don't know how to delete the input before the x
$(".removeField").click(function(e){
$(e.target).remove();
})
.form-style-2{
max-width: 600px;
padding: 10px 10px 2px 10px;
font: 13px Arial, Helvetica, sans-serif;
background: rgba(blue, 0.8);
}
.form-style-2-heading{
color:black;
font-weight: bold;
font-style: italic;
border-bottom: 2px solid #ddd;
margin-bottom: 20px;
font-size: 15px;
padding-bottom: 3px;
}
.form-style-2 label{
display:table;
width: 100%;
font-size: 15px;
}
.form-style-2 label > span{
color: black;
font-weight: bold;
padding-right: 5px;
width:25%;
display: table-cell;
}
.form-style-2 span.required{
color:red;
}
.form-style-2 a{
display: block;
}
.form-style-2 .removeField{
display: inline;
}
.form-style-2 input.input-field {
border: 1px solid #c2c2c2;
border-radius: 3px;
box-sizing: border-box;
display: table-cell;
margin: 4px;
outline: medium none;
padding: 7px;
width: 31%;
}
.form-style-2 input.env, input.vol{
width: 75% !important;
}
.form-style-2 input.nameModif{
width: 50% !important;
}
.form-style-2 .input-field:focus{
border: 1px solid #0C0;
}
.form-style-2 input.saveModif{
border: none;
padding: 5px 5px 5px 5px;
background: green;
color: #fff;
box-shadow: 1px 1px 4px #DADADA;
border-radius: 3px;
margin-right: 10px;
}
.form-style-2 input.saveModif:hover{
background: green;
color: #fff;
}
.form-style-2 input.cancelModif{
border: none;
padding: 5px 5px 5px 5px;
background: red;
color: #fff;
box-shadow: 1px 1px 4px #DADADA;
border-radius: 3px;
}
.form-style-2 input.cancelModif:hover{
background: red;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-style-2">
<div class="form-style-2-heading"></div>
<form action="" method="post">
<label>
<span>Container name
<span class="required">*</span>
</span>
<input type="text" class="input-field nameModif" value="" required/>
</label>
<label id="labelEnv">
<span>Environment
</span>
<input type="text" class="input-field env" value="delete me"/><!--<a class="removeField" aria-expanded="false"><i class="fa fa-times"></i></a> -->
<button class="removeField" type="button">x</button>
<input type="text" class="input-field env" value="or me"/><!--<a class="removeField" aria-expanded="false"><i class="fa fa-times"></i></a> -->
<button class="removeField" type="button">x</button>
<input type="text" class="input-field env" value="or even me"/><!--<a class="removeField" aria-expanded="false"><i class="fa fa-times"></i></a> -->
<button class="removeField" type="button">x</button>
<a class="addEnv" aria-expanded="false">+<i class="fa fa-plus"></i></a>
</label>
<label>
<span> </span>
<input class="saveModif" type="button" value="Save" />
<input class="cancelModif" type="button" value="Cancel" />
</label>
</form>
</div>
解决方案
You can use JQuery's prev function:
$(e.target).prev('input').remove();
It finds the closest 'x' element (in this case- input) previous of the current element.
Similarly there's also a 'next' function.
这篇关于如何删除我的按钮之前的输入元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
