CODEWITHSUNDEEP
javascriptjquery
ivva
ivva

Reputation: 2949

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.

Upvotes: 1

Views: 59

Answers (2)

boroboris
boroboris

Reputation: 1620

This example illustrates how to use multiple selectors in JQuery to get element with more attributes:

<h1 name="director_front_passport" data-item="1">Text to be deleted after 3 seconds.</h1>

<script type="text/javascript">
    setTimeout(function (){
        $("[name='director_front_passport'][data-item='1']").remove();
    }, 3000);
</script>

Upvotes: 1

gaetanoM
gaetanoM

Reputation: 42054

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>

Upvotes: 1

Related Questions