Find the nearest id in javascript

Question

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

Christian Meyer · Accepted Answer · 2022-04-27 09:39:29Z

1

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>

answered Apr 27, 2022 at 9:39

Christian Meyer

1,7961 gold badge19 silver badges25 bronze badges

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

4 Comments

connexo Over a year ago

but personally i like it more to split HTML and JS Then why are you using inline event handlers?

Christian Meyer Over a year ago

Good point. True that was missleading. I meaned i'd like to split the view from the business logic. I see people doing calculations inside the onclick HTML tag... If I use inline event handlers and I think there are situations where it makes sense. I try to keep them short and do the math inside a function. In widely used frameworks like angular or react you also use inline events.

connexo Over a year ago

No, these frameworks don't use inline event listeners - that's a wide-spread misconception. They use declarative event listeners in templates (e.g. JSX) which are then compiled to use the addEventListener API.

Christian Meyer Over a year ago

Angular uses as far as I'm aware of directives that uses under the hood also AddEventlistener but I don't understand your point. Even though they technically don't use the inline events it acts, looks and feels like them or do I miss something?

Asplund · Accepted Answer · 2022-04-27 09:39:37Z

1

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>

answered Apr 27, 2022 at 9:39

Asplund

2,5261 gold badge11 silver badges20 bronze badges

2 Comments

Christian Meyer Over a year ago

Haha lol i posted the exact same answer cheers mate 😂😂

Asplund Over a year ago

@ChristianMeyer 🍻

connexo · Accepted Answer · 2022-04-27 09:55:35Z

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>

answered Apr 27, 2022 at 9:55

connexo

57.3k15 gold badges112 silver badges150 bronze badges

Collectives™ on Stack Overflow

Find the nearest id in javascript

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related