Find the nearest id in javascript-CodePudding

I have two divs

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

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

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

CodePudding user response：

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 >
    <input type="hidden" value="1">

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

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

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

CodePudding user response：

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 >
  <input type="hidden" value="1" />

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

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

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

CodePudding user response：

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 >
  <input type="hidden" value="1" />

  <div >Remove</div>
</div>

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

  <div >Remove</div>
</div>