Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

171
Visualizações
Find the nearest id in javascript

I have two divs

<div class="maca">
    <input type="hidden" value="1">

    <div onclick="removeInput(nearest input type hidden)">Remove</div>
</div> 

<div class="maca">
    <input type="hidden" value="1">

    <div onclick="removeInput(nearest input type hidden)">Remove</div>
</div> 

I want to send as a parameter the value of nearest input type hidden of that div that we are clicking on

about 4 years ago · Juan Pablo Isaza
3 Respostas
Responde à pergunta

0

Im not 100% sure what you mean with nearest but with this you get the input hidden inside the div. By the way you could also put the element.parentNode.querySelector into the onclick but personally i like it more to split HTML and JS.

function removeInput(element){
let value = element.parentNode.querySelector("input[type='hidden']").value;
console.log(value);
}
<div class="maca">
    <input type="hidden" value="1">

    <div onclick="removeInput(this)">Remove</div>
</div> 

<div class="maca">
    <input type="hidden" value="5">

    <div onclick="removeInput(this)">Remove</div>
</div>

about 4 years ago · Juan Pablo Isaza Relatório

0

You can send the event as a parameter to a javascript function and then find the input via the parentNode. This isn't a literal interpretation of your question since faithfully the "nearest" element is rather complex and probably not what you're looking for.

function removeInput(e) {
  const nearestInput = e.target.parentNode.querySelector("input[type='hidden']");
  console.log(nearestInput);
}
<div class="maca">
  <input type="hidden" value="1" />

  <div onclick="javascript:removeInput(event)">Remove</div>
</div>

<div class="maca">
  <input type="hidden" value="1" />

  <div onclick="javascript:removeInput(event)">Remove</div>
</div>

about 4 years ago · Juan Pablo Isaza Relatório

0

You should not use inline event listeners, which are widely considered bad practice.

Instead, use addEventListener to add the click listeners, and find the input (given your markup structure is fix like you've shown) using previousElementSibling:

for (const remover of document.querySelectorAll('.remove-input')) {
  remover.addEventListener('click', () => remover.previousElementSibling.remove(), { once: true });
}
<div class="maca">
  <input type="hidden" value="1" />

  <div class="remove-input">Remove</div>
</div>

<div class="maca">
  <input type="hidden" value="1" />

  <div class="remove-input">Remove</div>
</div>

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda