Elements Removal in javascript

Question

i want to remove specific child elements from my div element using javascript but i can't able to do that. this is the format of element

<div class="div1">
<span class="spanp">span1<span class="spanc">spanchild1</span></span>
<span class="spanc">spanc</span>
<span class="spanp">span2<span class="spanc">spanchild2</span></span>
<span class="spanc">spanc</span>
<span class="spanp">span3<span class="spanc">spanchild3</span></span>
<span class="spanc">spanc</span>
</div>

i want to delete span elements of class="spanc" only. how i can do it using javascript only

var list=document.getElementsByClassName("spanc");
for(var i=0;i<list.length;i++){
list[i].parentNode.removeChild(list[i]);
}

when i run this i'am able to delete only main spanc class elements and subelements of class spanp elements on odd indexs only.even index spanp class subelements are strill in list

sorry for the incomplete info. i just edited the question. Could you please read again for me. Thank You — vamsi saggurthi, Mar 14 '20 at 19:44
What does "I can't able to do that" mean? I don't see any code where you show what you've tried so far, which is kind of important because removing an element from the DOM is a pretty simple thing to do (get a reference to the element, then removeChild it from its parent) — Mike 'Pomax' Kamermans, Mar 14 '20 at 19:46
no i tried it through for loop but only removing either subelement of spanp class or odd index element of spanc class — vamsi saggurthi, Mar 14 '20 at 19:52
i just used getting elements through document.getElementsByClassName("spanp") and saved them in a array variable later i used for loop to get every element in that array and used removechild method — vamsi saggurthi, Mar 14 '20 at 19:54
It is necessary that you add your failing code to the question. Talking about it in comments is never going to clarify it as much as just adding the actual code in the question, so we can *reproduce* your issue. — trincot, Mar 14 '20 at 20:00

score 1 · Answer 1 · answered Mar 14 '20 at 20:11

1

I suppose this could do the trick:

const spanc = document.querySelectorAll('.div1 .spanc');
spanc.forEach(node => node.remove());

answered Mar 14 '20 at 20:11

leprechaun

31
3

score 1 · Answer 2 · answered Mar 14 '20 at 20:16

So part of the issue is the spans you are trying to remove have different parent elements; sometimes it's a span otherwise it's a div.

const itemsToRemove = document.getElementsByClassName('spanc');
const parents = document.getElementsByClassName('spanp');
[...parents].forEach(span => {
  const itemsToRemove = span.getElementsByClassName('spanc');
  [...itemsToRemove].forEach(item => span.removeChild(item));
});

const outerParent = document.getElementsByClassName('div1')[0];
const upperItemsToRemove = outerParent.getElementsByClassName('spanc');
[...upperItemsToRemove].forEach(item => outerParent.removeChild(item));

<div class="div1">
  <span class="spanp">span1<span class="spanc">spanchild1</span></span>
  <span class="spanc">spanc</span>
  <span class="spanp">span2<span class="spanc">spanchild1</span></span>
  <span class="spanc">spanc</span>
  <span class="spanp">span2<span class="spanc">spanchild1</span></span>
  <span class="spanc">spanc</span>
</div>

score -2 · Answer 3 · answered Mar 14 '20 at 20:17

-2

Thank you for the help i got the answer by using while loop instead of forloop

while(list.length>0){
let i=0;
list[i].parentNode.removeChild(list[i]);
}

answered Mar 14 '20 at 20:17

vamsi saggurthi

71
1
3
12

Why do you use the variable `i`?? – trincot Mar 14 '20 at 20:17
for indexing elements in the list. i thought while using for loop the indexing was somewhere so i tried while loop it worked – vamsi saggurthi Mar 14 '20 at 20:22
But look at it: `i` is always 0, so why would you need a *variable* (it does not vary at all), and tell it in *every* iteration to be 0? It works yes, but this is not how it is done. – trincot Mar 14 '20 at 20:23
array always starts with indexing of 0 and we can't access elements of array without index number so i did the same when i'm removing element the array size is decreasing and array is updating. if i increase the i value then again i will face the same as i faced it in for loop. i even tried that also ok. – vamsi saggurthi Mar 14 '20 at 20:26
I don't think you understand my comments :/ I didn't say that `i` needs to increase... You miss my point. – trincot Mar 14 '20 at 20:36
ok let me explain you while i'm using for loop the indexing was not going well so i choosen while loop. by using indexing using i when the first loop starts the condition checks array size and goes in. after that as per the index given it deletes the first child next the array automatically updates so as content and index also so when the second loop starts if i increased the index then it will skip the element and removes next elements means the odd elements will be deleted while the even elements stays same. For indexing i need some variable so i declared i as variable with value 0 as index – vamsi saggurthi Mar 14 '20 at 20:41
which method you suggest to get elements of array – vamsi saggurthi Mar 14 '20 at 20:44
I understand where you are coming from, but you should really read what I wrote. For answers to your question, see the references that were added to the closure reason of your question. leprechaun's answer here is the way to go, but his answer does not explain why your original code failed. – trincot Mar 14 '20 at 20:50
if didn't used variable i there it was skipping one element in loop means going through odd elements only that's why i had used that variable there – vamsi saggurthi May 09 '20 at 12:24
I'm afraid you still miss the point. – trincot May 09 '20 at 12:38

Elements Removal in javascript

3 Answers3