CODEWITHSUNDEEP
javascriptjqueryhtmljquery-selectors
DavidH
DavidH

Reputation: 57

Select an element without certain elements inside

I'd like to export my HTML div as a jpeg by clicking a button which is in the div and I don't want the button to be printed. Therefore I need a selector on the div which does not select items with a certain class inside the div.

I've tried the :not() selector, but it does not work appearantly:

$(".asdf:not(.export-button)")

Here is my code:

<div id="asdf">
    <p>Lorem ipsum ...</p>
    <img src="area_graph.png" alt="graph"/>
    <p>hallo</p>
    <button class="export-button">EXPORT</button>
</div>

$(".export-button").on("click", function () {

    var $tempNode = $(this).parent()[0];
    $tempNode.remove(".export-button");
    console.log($tempNode);

    // image export
});

Upvotes: 1

Views: 160

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337733

As the DOM is a tree structure when you select one element you get all it's children with it. To do what you require you'd need to select the element then remove() the elements you do not want in a separate statement

$(".export-button").on("click", function() {
  var $tempNode = $(this).parent().clone();
  $tempNode.find(".export-button").remove();
  console.log($tempNode.html());

  // image export
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="asdf">
  <p>Lorem ipsum ...</p>
  <img src="area_graph.png" alt="graph" />
  <p>hallo</p>
  <button class="export-button">EXPORT</button>
</div>

Upvotes: 1

Related Questions