Estoy tratando de seleccionar un elemento usando una variable en el selector para eliminar el elemento más cercano con la clase flag-container . Sin embargo, el elemento no se elimina cuando activo la función.
function remove_div() { let comment_pk = 1 $("div:contains('" + comment_pk + "')").closest('.flag-container').remove() } $('#trigger').click(function() { remove_div() }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div hidden class="comment-pk">1</div> <div class="drilled-hierarchy"> <div class="flag-container"> To be removed </div> </div> <button id="trigger"> Remove </button>El problema en su lógica es que la closest() viaja hacia arriba en el DOM a lo largo de los elementos del antepasado . El .flag-container que está buscando apuntar es, en cambio, un hijo de un hermano del div original.
Por lo tanto, puede usar next() * y find() en su lugar:
function remove_div() { let comment_pk = 1 $("div:contains('" + comment_pk + "')").next('.drilled-hierarchy').find('.flag-container').remove() } $('#trigger').click(function() { remove_div() }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div hidden class="comment-pk">1</div> <div class="drilled-hierarchy"> <div class="flag-container"> To be removed </div> </div> <button id="trigger">Remove</button> *usar un argumento de cadena de selector en la next() es opcional en este caso, pero ahorra errores inesperados más adelante. siblings() también puede ser apropiado dependiendo de su caso de uso exacto.
En Vanilla JS, solo encontrará coincidencias exactas:
[...document.querySelectorAll('div')] .find(d=>d.textContent===String(comment_pk)) .nextElementSibling .querySelector('.flag-container') .remove();