Remove Element

📺 Watch this recipe in the video Remove The Found Element.

<div id="make">
  Honda Civic
  <span class="picked">(3 out of 4)</span>
</div>

.picked {
  font-size: smaller;
  font-weight: lighter;
}

To remove the span.picked from the page, we can use the jQuery remove method. Cypress querying commands yield jQuery objects, thus we can use cy.invoke to call the remove method immediately.

cy.get('.picked').invoke('remove')
// confirm the element was removed
// by checking the parent's element text
// Note: cannot use "have.text" assertion
// since the HTML element has newlines and other
// whitespace characters
cy.get('#make')
  .invoke('text')
  .invoke('trim')
  .should('equal', 'Honda Civic')

Remove the middle element

📺 Watch this example explained in the video Remove The Middle Element.

<ol id="pets">
  <li>Dog</li>
  <li>Shark</li>
  <li>Cat</li>
</ol>

Let's remove the middle element (index 1 if using the cy.eq command with 3 elements).

cy.get('#pets li')
  .should('have.length', 3)
  .eq(1)
  .invoke('remove')
// confirm the right element was removed
// using the "read" assertion from cypress-map plugin
cy.get('#pets li').should('read', ['Dog', 'Cat'])