2016-11-20 3 views
-1

Как удалить указанных детей?

<body> 
 
    <p>dfg</p> 
 
    <h1>yoyo</h1> 
 
    <h1>yoyo2</h1> 
 
    <ul> 
 
    <li>somo</li> 
 
    </ul> 
 
</body> 
 
    

Например, я хочу, чтобы удалить только h1 из тела. Остальные дети должны оставаться

+0

Возможный дубликат [Удалить элемент по идентификатору] (http://stackoverflow.com/questions/3387427/remove-element-by-id) –

+1

Спасибо за этот вопрос. Я просто пообедал с моим подростковым сыном и задался вопросом о том же. :) – Paul

+1

Какой отец удалит своих детей ?! И даже не назвав их ... Это так грустно – Myst

ответ

0

Вы можете использовать getElementsByTagName, чтобы получить HTMLCollection (не массив) тегов h1, который находится в в прямом эфире.

Когда элемент удален, элементы соответственно обновляют свои индексы, что означает, что вам необходимо удалить каждый элемент из последней позиции в первую.

решение Javascript:

var h1Elems = document.getElementsByTagName('h1'); 

for(var i = h1Elems.length - 1; i >= 0; i--){ 
    h1Elems[i].parentElement.removeChild(h1Elems[i]); 
} 

See this code working in this jsfiddle

+1

Было бы проще просто сказать 'while (h1Elems.length) h1Elems [0] .remove();'. –

+0

Это изящная альтернатива, спасибо. – Pineda

3

Вы можете использовать селектор CSS.

Вы можете сделать это с помощью jQuery или VanillaJS. Например, вот мой код для VanillaJS.

var headers = document.querySelectorAll('h1'); 
headers.forEach(function(h) { h.remove(); }); 

Это эффективно удалит заголовки из DOM.

+0

Да, предполагая, что вы находятся в среде, в которой 'forEach' определяется по результату' querySelectorAll'. –

+0

В случае, если у вас нет доступа к нему, вы можете использовать jQuery (например), чтобы сделать это для вас, или вы можете использовать polyfill. – gretro

1

Мы можем создать собственную Fn, чтобы удалить узел по тэгу для удобства использования. Пожалуйста, ознакомьтесь с одним:

function rem(tag) { 
 
    var h = document.querySelectorAll(tag); //return NodeList not array  
 
    [].forEach.call(h,function(elm) {    
 
     elm.parentNode.removeChild(elm); 
 
    }); 
 
} 
 

 
//passing tag to remove 
 
rem('p');
<body> 
 
    <p>dfg</p> 
 
    <h1>yoyo</h1> 
 
    <h1>yoyo2</h1> 
 
    <ul> 
 
    <li>somo</li> 
 
    </ul> 
 
</body>

+1

Почему проверка 'if (h.parentNode' необходима? И вы уверены, что' forEach' будет работать с результатом 'querySelectorAll'? –

+0

Спасибо @torazaburo, я пытался так много раз получить' if (h.parentNode) 'return' false', но не удалось. Я только что отредактировал свой ответ, включая исправление того, как мы должны обрабатывать возврат NodeList 'querySelectorAll' – RizkiDPrast

Смежные вопросы