Question

我需要创建一个获取用户输入的函数（一个css选择器）并删除所有这些元素。这是迄今为止的功能

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

以及启动它的HTML

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

Answer 1

将您的方法更改为

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
  };
}

Answer 2

我建议使用框架jQuery！它是一个非常强大的工具，可以帮助您简化和改进JavaScript代码及其性能。

使用jQuery，您可以轻松地使用这段代码通过CSS选择器删除任何元素。

// Use any CSS Selector here

var elements = $(".class");

$.each(elements, function(){

$(this).remove();

)};

这使您的代码非常易于阅读并具有高性能。

Answer 3

//Try this code:

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

Answer 4

您可以执行相同操作，而无需使用带有纯javascript（在这种情况下为ES6语法）的任何库：

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>

删除指定元素的函数

4 个答案: