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.

Answer 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> 

Answer 2

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>