Question

我目前有一个工作变量，目标是父节点3级别

＆＃13;

searchClearSelector: '.search-form__clear', //The clear button on my input

  //Checks if there is a value in the input to clear then calls a function
  self._ClearActions = document.querySelectorAll(self.searchClearSelector);
if (self._ClearActions && self._ClearActions.length > 0) {
  for (const _Action of self._ClearActions) {
    _Action.addEventListener('click', self.ClearActionHandler);
  }
}

//Clear function
ClearActionHandler() {
  const self = this;
  const _Handle = this;
  const _HandleParent = parentNode.parentNode.parentNode;
  const _SearchInput = _HandleParent.querySelector('.search-form__input');
}

＆＃13;

<input className="search-form__input" placeholder="Enter text" />

<div className="search-form__actions">
  <button type="button" className="search-form__clear">Clear</button>
</div>

＆＃13;

它工作正常，但似乎有点hacky - 我有更好的方法来做这个吗？

谢谢！

编辑 - 更新的代码，我不得不把大部分其他东西拿出来，因为它是一个巨大的文件，问题是IE没有清除它（因为它不起作用最接近香草JS）

Answer 1

您可以使用递归函数：

function upperParents(element, levels) {
  if (levels == 1) return element.parentNode || element;
  if (levels < 1) return element;
  return upperParents(element.parentNode || element, levels - 1);
}

document.getElementById('btnwithparents').addEventListener('click', function() {
  console.log(upperParents(this, 2));
});

<div class="theparent">
  <span>
      <button id="btnwithparents">Search my parent 2 levels above</button>
  </span>
</div>

Answer 2

你可以实现这样的功能：

const _HandleParent = parentsUntil(3, this); // 3rd parent

const parentsUntil = (num, elem) => {
   if(num <= 0) return;
   let node = elem;
   while(num--) node = node.parentNode;
   return node;
}

Answer 3

您可以使用while循环执行此操作。

  var node = document.getElementById("id");
  var levels = 3;
  while (levels >= 0) {
      node = node.parentNode;
      levels--;
  }

Answer 4

每个人都给出了解决方案，而另一个是：

function getUpstream(el,lvl){
    if(!(el instanceof Node)){
        throw("Not a node!");
    }
    while((--lvl>=0)&&el){
        el = el.parentNode;
    }
    return el;
}

getUpstream（document.body的，1）

更好的方法是将父节点3升级？

4 个答案: