Как использовать свойство parentNode несколько раз?

Question

У меня вопрос. Как я могу использовать свойство parentNode несколько раз?

Я знаю, что я могу сделать что-то вроде этого:

document.getElementById("mytag").parentNode.parentNode.remove(); 

Или что-то вроде этого. Моя проблема заключается не в том, что я могу добавить больше или меньше .parentNode, чтобы удалить все, что хочу удалить.

Моя проблема в том, что я хочу создать удобное для пользователя приложение, в котором пользователь может самостоятельно объявить, сколько parentNodes необходимо удалить.

Сначала я попытался добавить .parentNode по петле. Это не работает. На втором я попробовал то же самое с функцией eval(). Тот же результат.

Есть ли у кого есть хорошее решение, как я могу это сделать? Это было очень полезно, если есть возможность, по которой вам нужно только указать число parentNodes.

Вот небольшой пример. Что я буду делать "автоматически":

myFunction(..., ..., 3) { 
    ... 
    document.getElementById("mytag").parentNode.parentNode.parentNode.remove(); 
} 

Или

myFunction(..., ..., 2) { 
    ... 
    document.getElementById("mytag").parentNode.parentNode.remove(); 
} 

Или

myFunction(..., ..., 1) { 
    ... 
    document.getElementById("mytag").parentNode.remove(); 
} 

Большое спасибо.

Я предпочитаю решение в чистом JS. Также было бы неплохо добавить другое решение jQuery.

Answer 1

Эта функция должна выполнять работу:

function removeParent(element, num) { 
    var parent = element; 
    for (var i = 0; i < num; i++) { 
     if (parent.parentNode) { 
      parent = parent.parentNode; 
     } 
    } 
    parent.remove(); 
} 

Вы можете проверить его на этой странице. Например, логотип stackoverflow. Структура HTML выглядит так:

HTML 
    HEAD 
    BODY 
     DIV.container 
      DIV#header 
       DIV#hlogo 

Откройте консоль, скопируйте и вставьте эту функцию, а затем введите removeParent(hlogo, 4). Целая страница исчезнет :)