Javascript循环以消除不以特定值开头的元素



我在HTML示例中的.media-body.media标题中嵌入了链接。我想写JS来删除任何文本不是以输入元素中的value属性开头的链接,在这种情况下是";A";

我在下面做了一个手动版本,它检查第一个a标记,如果文本不是以"a"开头,则在点击按钮时手动删除另一个a标记;A";。我需要它以某种方式循环并在页面加载时自动完成,但不确定我是如何做到的。感谢您的帮助。

<!DOCTYPE html>
<html>
<body>
<input type="text" name="search" value="A" class="searchbox">
<div class="media-body">
<div class="media-heading">
<a href="#">A doc beginning with A</a>
</div>
</div>
<div class="media-body">
<div class="media-heading">
<a href="#">Doc beginning with D</a>
</div>
</div>
<button onclick="startFunction()">Remove wrong doc</button>
<script>
function startFunction() {
var az = document.getElementsByTagName("input")[0].getAttribute("value");
var getstart = document.getElementsByTagName("a")[0].innerHTML;
var searchletter = getstart.startsWith(az);
var myobj = document.getElementsByTagName("a")[1];
if(searchletter = az)
{
myobj.remove();
}
}
</script>
</body>
</html>

关于如何在页面加载时自动执行此操作的问题的第二部分很快就得到了回答。方便的是,您已经将该功能封装在它自己的函数startFunction()中。因此,您所要做的就是在html代码的<body>定义之后执行该函数。

第一部分并不难,因为你几乎还需要设置任何东西。唯一缺少的是通过使用简单的for循环执行document.getElementsByTagName("a")来检索HTMLCollection(或多或少是一个数组(。

不过,有一个陷阱:当您在HTMLCollection上循环并最终使用.remove()从DOM中删除对象时,您最终也在更改集合。换句话说,如果删除对象,则列表将缩小一个元素。为了补偿循环,需要从元素的初始数量开始,然后递减一。

这里有一个例子:

function startFunction() {
let az = document.getElementsByTagName("input")[0].getAttribute("value");
let elements = document.getElementsByTagName("a");
let element;
for (let a = elements.length - 1; a >= 0; a--) {
element = elements[a];
if (!element.innerHTML.startsWith(az)) {
element.remove();
}
}
}
startFunction();
<input type="text" name="search" value="A" class="searchbox">
<div class="media-body">
<div class="media-heading">
<a href="#">A doc beginning with A</a>
</div>
</div>
<div class="media-body">
<div class="media-heading">
<a href="#">Doc beginning with D</a>
</div>
<div class="media-body">
<div class="media-heading">
<a href="#">Something completely different</a>
</div>
</div>

相关内容

最新更新