delete the current and also delete the before it using plain javascript

Question

I have this HTML structure:

 <tr class="project-details">REMOVE THIS</tr>
<tr class="project-description">
  <td colspan="6">
    <div class="project-desc-inner">
      <div class="project-synopsis">
        <p class="trunk8">This is an entry</p>
      </div>
      <div class="project-verification">
        <span class="verfied-badge"> <~~~~~~~~~~ THIS SPAN
            <span class="currency-symbol">$</span>
            <span class="icon-tick"></span>
            Verified
        </span>
      </div>
      <div class="project-actions">
        <a href="#">
            <button class="btn">LOL</button>
        </a>
      </div>
    </div>
  </td>
</tr>

And I hope that the entire <tr class="project-details">REMOVE THIS</tr> plus its contents will be remove completely

This is what I have so far:

function showAlert()
{
var projectDescriptions = document.querySelectorAll('tr.project-description'),
    projectDescriptions = Array.prototype.slice.call(projectDescriptions); 
    projectDescriptions.forEach(function(el) { 
        if (el.querySelector('span.verfied-badge')) { 

        }else {
            el.parentNode.removeChild(el);
            el.prev('tr').remove();
        }
    });
}

What it does is select the <tr> with the <span> I am looking for, then delete the entire span. This part el.prev('tr').remove(); is not working, any alternative?

Thanks!

score 1 · Answer 1 · answered Feb 24 '15 at 05:12

1

prev is a method of a jQuery object. HTMLElement object has no prev method. For selecting the previous element sibling you can use the previousElementSibling property.

answered Feb 24 '15 at 05:12

Ram

143,282
16
168
197

jdphenix · Accepted Answer · 2015-02-24T05:32:35.057

1

The body of the else clause:

(function removePreviousSibling(sibling) {
  if (sibling.nodeName === 'TR' && sibling.classList.contains('project-details')) {
    return sibling.parentNode.removeChild(sibling);
  }
  removePreviousSibling(sibling.previousSibling);
}(el.previousSibling));
el.parentNode.removeChild(el);

The IIFE ensures if there is an extra text node between the two <tr> elements that the text node will be skipped and not deleted if you just did called a removeChild on the previousSibling of the target element.

Take a look over the information at MDN's DOM page. It's got a great set of interface documentation and tutorials.

edited Feb 24 '15 at 05:32

answered Feb 24 '15 at 05:20

jdphenix

15,022
3
41
74

again, thank you thank you! Btw, how can I make sure that such `` remove has the class `project-details`? Thanks! – The Wolf Feb 24 '15 at 05:22
1

Instead of `if (sibling.nodeName === 'TR')`, do `if (sibling.nodeName === 'TR' && sibling.classList.contains('project-details'))` if you want to continue iteration until a match is found containing that class – jdphenix Feb 24 '15 at 05:29
@TheWolf Also I'm wondering, it looks like you have a table describing some kind of project, would something like deleting the table be appropriate instead. More generally *what problem are you trying to solve?* – jdphenix Feb 24 '15 at 05:33
Actually you already solved everything. Here it is: http://stackoverflow.com/questions/28669127/javascript-on-page-load-check-if-a-span-under-tr-with-a-specific-class-exist – The Wolf Feb 24 '15 at 05:35

delete the current and also delete the before it using plain javascript

2 Answers2