Estoy tratando de encontrar la next closest a mi elemento, obtenga su valor y elimine una cadena de él.
El valor que necesito eliminar es una data-id del elemento en el que se ha hecho clic.
Intenté lo siguiente, pero arroja un error en la consola, lo que significa que no puede encontrar la entrada:
$(document).on('click', '.deletImg', function() { var id = $(this).attr('data-id'); $('[data-id="' + id + '"]').remove(); var $this = (this); var removeValue = function(list, value, separator) { separator = separator || ","; var values = list.split(separator); for (var i = 0; i < values.length; i++) { if (values[i] == value) { values.splice(i, 1); return values.join(separator); } } return list; } var inp = $($this).parents().eq(1).find(".input").val(); inp = removeValue(inp, id); $($this).parents().eq(1).find(".input").val(inp); }); .addedImg { width: 100px; height: 100px; position: relative; display: inline-block; margin-right: 12px; } .imgHolder { height: auto; overflow-y: hidden; overflow-x: scroll; min-width: 1000px; width: auto; } .myBlock { overflow-y: hidden; overflow-x: scroll; margin-bottom: 10px; } .addedImg img { width: 100%; border-radius: 4px; } .deletImg { position: absolute; width: 25px; height: 25px; text-align: center; line-height: 25px; background: black; color: white; top: 10px; right: 10px; border-radius: 4px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <div class="row" style="margin-bottom:10px;"></div> <div class="block block-strong myBlock"> <div class="imgHolder"> <div data-id="dd" class="addedImg"> <div class="deletImg" data-id="dd">X</div><img class="tappableImg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/783px-Test-Logo.svg.png"></div> </div> </div> <input type="text" class="input" value="22,44,66,99,dd" />¿Alguien puede aconsejarme sobre esto?
$($this).parents().eq(1) es el div .imgHolder . .input no es un descendiente de ese div, por lo que $($this).parents().eq(1).find(".input") no encuentra nada.
.input no está contenido en ninguno de los mismos contenedores que .deletImg . Es el siguiente elemento después del contenedor .myBlock , así que use $(this).closest(".myBlock").next().val() para obtener el valor de entrada.
Además, debe mover la llamada .remove() al final. Está eliminando el elemento que contiene $(this) , por lo que no puede encontrar el contenedor después de desconectarlo del DOM.
$(document).on('click', '.deletImg', function() { var id = $(this).attr('data-id'); var removeValue = function(list, value, separator = ",") { var values = list.split(separator); let index = values.indexOf(value); if (index != -1) { values.splice(index, 1); return values.join(separator); } return list; } var inp = $(this).closest(".myBlock").next().val(); inp = removeValue(inp, id); $(this).closest(".myBlock").next().val(inp); $('[data-id="' + id + '"]').remove(); }); .addedImg { width: 100px; height: 100px; position: relative; display: inline-block; margin-right: 12px; } .imgHolder { height: auto; overflow-y: hidden; overflow-x: scroll; min-width: 1000px; width: auto; } .myBlock { overflow-y: hidden; overflow-x: scroll; margin-bottom: 10px; } .addedImg img { width: 100%; border-radius: 4px; } .deletImg { position: absolute; width: 25px; height: 25px; text-align: center; line-height: 25px; background: black; color: white; top: 10px; right: 10px; border-radius: 4px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <div class="row" style="margin-bottom:10px;"></div> <div class="block block-strong myBlock"> <div class="imgHolder"> <div data-id="dd" class="addedImg"> <div class="deletImg" data-id="dd">X</div><img class="tappableImg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/783px-Test-Logo.svg.png"></div> </div> </div> <input type="text" class="input" value="22,44,66,99,dd" />Puede tomar una lista de todos los elementos en el DOM atravesados de forma DFS y encontrar input más cercana independientemente de la posición jerárquica en el árbol.
document.addEventListener('click', evt => { const id = evt.target.getAttribute('data-id'); // Apply logic only if clicked element has 'data-id' attribute if (id) { // Convert HTMLAllCollection to Array to use indexOf, slice and find const all = Array.from(document.all); // Index of clicked element const idx = all.indexOf(evt.target); // The "closest" input would be the next input in the plain // list of all elements after the clicked element const input = all.slice(idx).find(el => el.tagName === 'INPUT'); // Remove data-id from input value const value = input.value.split(',').reduce((acc, cur) => { if (cur !== id) { acc.push(cur); } return acc; }, []).join(','); input.value = value; // Remove clicked element evt.target.remove(); } });