CODEWITHSUNDEEP
javascripthtml
The Wolf
The Wolf

Reputation: 195

delete the current <tr> and also delete the <tr> before it using plain javascript

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!

Upvotes: 2

Views: 87

Answers (2)

jdphenix
jdphenix

Reputation: 15425

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.

Upvotes: 1

Ram
Ram

Reputation: 144689

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.

Upvotes: 1

Related Questions