使用 javascript 删除块 HTML答案

【问题标题】：remove a block HTML with javascript使用 javascript 删除块 HTML
【发布时间】：2017-05-06 14:55:11
【问题描述】：

我在项目 angularjs 中使用 owl-carousel 我尝试在使用 $(element).data('owlCarousel').destroy(); 进行数据更改后重新初始化 owl-carousel 并删除此块：

<div class="owl-wrapper">
<div class="owl-item" ></div>
<div class="owl-item" ></div>
<div class="owl-item" ></div>
<div class="owl-item" ></div>
<div class="owl-item" ></div>
</div>

我试试这个：

 if(typeof $(element).data('owlCarousel') != 'undefined'){
                        $(element).data('owlCarousel').destroy();
                        $(element).find(".owl-item").removeClass("owl-item");                   
                    }

在页面加载时它工作正常，但在数据更改时它不起作用例如我有 5 个项目要显示然后我应该得到 5 个块 <div class="owl-item" ></div> 但我得到了我的 5 个项目和更多的空块。

【问题讨论】：

" it's not working" 不是正确的或可操作的问题陈述。另请提供minimal reproducible example
抱歉，我编辑了我的问题。

标签： javascript angularjs owl-carousel

【解决方案1】：

你可以像这样删除整个元素：

const remove = el => el.parentElement.removeChild(el);

const owl = document.querySelector('div.owl-wrapper');

// remove it

remove(owl)

// check if it's removed (true = no such element in DOM) 

console.log(document.querySelector('div.owl-wrapper') === null)

<div class="owl-wrapper">
<div class="owl-item" >1</div>
<div class="owl-item" >2</div>
<div class="owl-item" >3</div>
<div class="owl-item" >4</div>
<div class="owl-item" >5</div>
</div>

【讨论】：

谢谢@wostex，在你的帮助下它几乎可以工作我在最后一个位置只得到一个空块。
您要完全删除它吗？ @MedKostali
是的，空块是
坦克你。
@MedKostali 我已经编辑了我的答案，现在你完全删除了这个块。在querySelector 中指定包装器 div，即您要从 DOM 中删除的那个。

【解决方案2】：

您是否尝试过使用

$(".owl-item").removeClass("owl-item");

【讨论】：