CODEWITHSUNDEEP
javascripthtml
Hayk Safaryan
Hayk Safaryan

Reputation: 2056

A function to remove specified elements

I need to create a function which gets user input (a css selector) and removes all of those elements. This is the function so far

function removeBySelector(selector) {
  var thisOne = document.querySelectorAll(selector);
  for(var i = 0; i<thisOne.length; i++) {
    document.removeChild(thisOne[0]);
  };
};

and the HTML that starts it

<button type="button" name="button" onclick="removeBySelector(prompt('Type the selector e.g p/ p.pClass'));">Remove By Selector</button>

Upvotes: 0

Views: 67

Answers (4)

Tony Caputo
Tony Caputo

Reputation: 66

You can do the same, without using any library with pure javascript (ES6 syntax in this case):

let elements = document.querySelectorAll(".please-remove");
elements.forEach(e => e.remove());
<div>
  <div class="keep">Keep this element</div>
  <div class="please-remove">1</div>
  <div class="please-remove">2</div>
  <div class="please-remove">3</div>
  <div class="please-remove">4</div>
  <div class="please-remove">5</div>
  <div class="please-remove">6</div>
</div>

Upvotes: 0

gurvinder372
gurvinder372

Reputation: 68443

change your method to

function removeBySelector(selector) 
{
  var thisOne = document.querySelectorAll(selector);
  for(var i = 0; i<thisOne.length; i++) 
  {
    thisOne[i].parentNode.removeChild( thisOne[i] ); //changed parentElement to parentNode
  };
}

Upvotes: 1

Deepanshu Gupta
Deepanshu Gupta

Reputation: 240

//Try this code:

    var removeElement=function(selector){
         $(document).find(selector).remove();
        };
     removeElement('h1'); // will remove all H1 elements from Document.

Upvotes: 0

Clemens Himmer
Clemens Himmer

Reputation: 1352

i'd advise using the framework jQuery! It is a very powerful tool that helps you simplify and improve your JavaScript code and it's performance.

With jQuery you can easily use this piece of code to remove any elements by CSS selector.

// Use any CSS Selector here

var elements = $(".class");

$.each(elements, function(){

$(this).remove();

)};

This keeps your code very easy to read and has a high performance.

Upvotes: 0

Related Questions