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: 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>&nbsp;</span>
              <input class="saveModif" type="button" value="Save" />
              <input class="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();
})