mistery_girl mistery_girl - 2 months ago 10
jQuery Question

How to find element based on data attr and input name that is array

I have the following html markup:



//this is in ajax success result
success: function(response) {
if(response.success) {
$("[data-input='" + response.field + "']").parents('.file-wrapper').find("[data-item='" + response.item + "']").remove();
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-md-2 director-label-file" for="director_front_passport">Front ID/Passport</label>
<div class="col-md-8 file-wrapper">
<input type="file" name="director_front_passport[]" class="app-file valid" data-item="1" aria-required="true" aria-invalid="false">
<label class="file-upload" for="director_front_passport"><span>Upload a File</span></label>
<div data-input="director_front_passport" class="file-name"><span class="image_wrapper"><span data-num="0" class="image_name">Link to image.jpeg</span><span title="Remove" data-placement="top" data-toggle="tooltip" class="glyphicon glyphicon-remove remove-file"></span></span></div><label id="director_front_passport[]-error" class="error" for="director_front_passport[]"></label>
</div





In ajax response I have:



{"success":true,"errors":false,"field":"director_front_passport","num":"0","item":"1"}





I want to find element with name=director_front_passport (or with data-input = director_front_passport - it's the same) and after that to find element with
data-item = response.item
which in this case = 1.

How to find it? I tried in this way.

Answer

Instead to use parents you may use .closest( selector ).

While parents gets the ancestors of each element in the current set of matched elements, optionally filtered by a selector;

closest gets the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

If the returned value from ajax is a string you may convert it with JSON.parse

My example:

$(function () {
  var response = '{"success":true,"errors":false,"field":"director_front_passport","num":"0","item":"1"}';

  $("[data-input='" + response.field + "']").closest('.file-wrapper').find("[data-item='" + response.item + "']").remove();

});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="form-group">
    <label class="col-md-2 director-label-file" for="director_front_passport">Front ID/Passport</label>

    <div class="col-md-8 file-wrapper">
        <input type="file" name="director_front_passport[]" class="app-file valid" data-item="1" aria-required="true"
               aria-invalid="false">
        <label class="file-upload" for="director_front_passport"><span>Upload a File</span></label>

        <div data-input="director_front_passport" class="file-name"><span class="image_wrapper"><span data-num="0"
                                                                                                      class="image_name">Link to image.jpeg</span><span
                title="Remove" data-placement="top" data-toggle="tooltip"
                class="glyphicon glyphicon-remove remove-file"></span></span></div>
        <label id="director_front_passport[]-error" class="error" for="director_front_passport[]"></label>
    </div>
</div>

Comments