How To Remove The Input Element Before My Button?

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

Solution 1:

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.

Solution 2:

You can use prev() method which targets the previous element of a given selector:

$(".removeField").click(function(e) {
  $(this).prev('input').remove();
})

.form-style-2 {
  max-width: 600px;
  padding: 10px10px2px10px;
  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-2label {
  display: table;
  width: 100%;
  font-size: 15px;
}

.form-style-2label>span {
  color: black;
  font-weight: bold;
  padding-right: 5px;
  width: 25%;
  display: table-cell;
}

.form-style-2span.required {
  color: red;
}

.form-style-2a {
  display: block;
}

.form-style-2.removeField {
  display: inline;
}

.form-style-2input.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-2input.env,
input.vol {
  width: 75%!important;
}

.form-style-2input.nameModif {
  width: 50%!important;
}

.form-style-2.input-field:focus {
  border: 1px solid #0C0;
}

.form-style-2input.saveModif {
  border: none;
  padding: 5px5px5px5px;
  background: green;
  color: #fff;
  box-shadow: 1px1px4px#DADADA;
  border-radius: 3px;
  margin-right: 10px;
}

.form-style-2input.saveModif:hover {
  background: green;
  color: #fff;
}

.form-style-2input.cancelModif {
  border: none;
  padding: 5px5px5px5px;
  background: red;
  color: #fff;
  box-shadow: 1px1px4px#DADADA;
  border-radius: 3px;
}

.form-style-2input.cancelModif:hover {
  background: red;
  color: #fff;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="form-style-2"><divclass="form-style-2-heading"></div><formaction=""method="post"><label><span>Container name
                <spanclass="required">*</span></span><inputtype="text"class="input-field nameModif"value=""required/></label><labelid="labelEnv"><span>Environment
              </span><inputtype="text"class="input-field env"value="delete me"/><!--<a class="removeField" aria-expanded="false"><i class="fa fa-times"></i></a> --><buttonclass="removeField"type="button">x</button><inputtype="text"class="input-field env"value="or me"/><!--<a class="removeField" aria-expanded="false"><i class="fa fa-times"></i></a> --><buttonclass="removeField"type="button">x</button><inputtype="text"class="input-field env"value="or even me"/><!--<a class="removeField" aria-expanded="false"><i class="fa fa-times"></i></a> --><buttonclass="removeField"type="button">x</button><aclass="addEnv"aria-expanded="false">+<iclass="fa fa-plus"></i></a></label><label><span>&nbsp;</span><inputclass="saveModif"type="button"value="Save" /><inputclass="cancelModif"type="button"value="Cancel" /></label></form></div>

Solution 3:

Use the prev function of jQuery:

$(".removeField").click(function(e){
     $(this).prev('input').remove();
     $(e.target).remove();
})