Question

我有一个包含图像的列表项的无序列表。我正在尝试将此列表复制到模态窗口，但想删除列表的模态版本中的图像。

HTML

<ul id="uk-networks" class="networks">
 <h7 class="catergory orange-text center">UK</h7>

 <a class="network-a" href="#"><li id="bbc"><img class="network-img" src="img/bbc.png"></li></a>
 <a class="network-a" href="#"><li id="daily"><img class="network-img" src="img/daily.png"></li></a>
 <a class="network-a" href="#"><li id="guardian"><img class="network-img" src="img/guardian.png"></li></a>
 <a  class="network-a" href="#"><li id="mirror"><img class="network-img" src="img/mirror.png"></li></a>
 <a  class="network-a" href="#"><li id="indep"><img class="network-img" src="img/indep.png"></li></a>
</ul>

Answer 1

使用JQUERY

您可以使用li遍历所有img元素并将其删除。将该代码保存在功能块中，以便在显示模态时调用该功能。要查看下面的代码段，您需要在该列表中使用inspect element浏览器。然后您会看到列表中没有img标记。

＆＃13;

$(document).ready(function(){
  function removeImage(){
    $('#uk-networks li img').each(function(){
      $(this).remove();
    });
  }
  //call this function when model is displayed
  removeImage();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="uk-networks" class="networks">
 <h7 class="catergory orange-text center">UK</h7>

 <a class="network-a" href="#"><li id="bbc"><img class="network-img" src="img/bbc.png"></li></a>
 <a class="network-a" href="#"><li id="daily"><img class="network-img" src="img/daily.png"></li></a>
 <a class="network-a" href="#"><li id="guardian"><img class="network-img" src="img/guardian.png"></li></a>
 <a  class="network-a" href="#"><li id="mirror"><img class="network-img" src="img/mirror.png"></li></a>
 <a  class="network-a" href="#"><li id="indep"><img class="network-img" src="img/indep.png"></li></a>
</ul>

＆＃13;

使用JAVASCRIPT

＆＃13;

document.querySelectorAll('li img').forEach((img) => img.remove());

＆＃13;

<ul id="uk-networks" class="networks">
 <h7 class="catergory orange-text center">UK</h7>

 <a class="network-a" href="#"><li id="bbc"><img class="network-img" src="img/bbc.png"></li></a>
 <a class="network-a" href="#"><li id="daily"><img class="network-img" src="img/daily.png"></li></a>
 <a class="network-a" href="#"><li id="guardian"><img class="network-img" src="img/guardian.png"></li></a>
 <a  class="network-a" href="#"><li id="mirror"><img class="network-img" src="img/mirror.png"></li></a>
 <a  class="network-a" href="#"><li id="indep"><img class="network-img" src="img/indep.png"></li></a>
</ul>

＆＃13;

Answer 2

Jquery的：

$("a").children().children().remove(); $("a > li >img").remove()

Answer 3

使用 javascript ，我们可以像

一样

[].forEach.call(document.querySelectorAll('.network-img'),function(e){
  e.parentNode.removeChild(e);
});

使用 Jquery 所有图片都有相同的类，因此以下代码将执行删除过程。

jQuery(document).ready(function ($) {
   $('.network-img').remove();
});

使用Javascript从列表项中删除img

3 个答案:

Jquery的：