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

Question

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.

In fact I need to find input with data-input=director_front_passport but also with data-item =. I found this input with :$("[data-input='" + response.field + "']") . But how to add condition also this field to have data-item=1? — ivva
– ivva, Commented Sep 6, 2016 at 13:48
I would put both conditions in selector. see this link: api.jquery.com/multiple-attribute-selector i'll post an answer shortly — boroboris
– boroboris, Commented Sep 6, 2016 at 13:55
Your code works. The problem seems to be elsewhere. Look at this simplified fiddle: jsfiddle.net/wmm7owqe Are you sure your ajax s returning JSON and not a String? Did you add the 'json' parameter to the ajax call? — VVV
– VVV, Commented Sep 6, 2016 at 14:02

gaetanoM · Accepted Answer · 2016-09-06 14:02:31Z

1

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>

answered Sep 6, 2016 at 14:02

gaetanoM

42.1k6 gold badges45 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ivva Over a year ago

Sorry, I wasn't correct. I need to find element with data-input = response.field that has data-item=response.item and after that I need to find element with class=image_name and remove it. In this case I need to remove "Link to image.jpeg" text.

gaetanoM Over a year ago

@mistery_girl In order to remove "Link to image.jpeg" you may use: $("[data-input='" + response.field + "']").closest('.file-wrapper').find(".image_name").remove();

ivva Over a year ago

Sorry, I didn't explain correct. I confused with these data attributes. I have multiple divs with the same input name of the field so I want to differ them using 1data-item. I found this way to find input with this name and data-item. $("input[name^='" + response.field + "'][data-item='" + response.item + "']").parents('.file-wrapper').find(".image_name").remove();`

gaetanoM Over a year ago

@mistery_girl I understood. Sorry again, but are you sure the parents is the right method instead of closest?

boroboris · Accepted Answer · 2016-09-06 20:08:04Z

1

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>

edited Sep 6, 2016 at 20:08

answered Sep 6, 2016 at 14:08

boroboris

1,6201 gold badge20 silver badges33 bronze badges

1 Comment

boroboris Over a year ago

also remove [] from director_front_passport

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related