使用javascript从html表中删除元素

前端之家收集整理的这篇文章主要介绍了使用javascript从html表中删除元素 前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我正在尝试使用javascript从html表中删除某些元素.更具体地说,我需要删除所有不包含两个子字符串的节点.

我试图保存不包含这两个子字符串的节点的位置,然后将其删除.

  1. var posToRemove = [];
  2. var tbody = document.getElementsByTagName("tbody")[0];
  3. var trTags = tbody.getElementsByTagName("tr");
  4. var substring0 = "Foo";
  5. var substring1 = "Bar";
  6. for (i = 0; i < trTags.length; i++) {
  7. var trTextContent = trTags[i].textContent;
  8. if (trTextContent.indexOf(substring0) !== -1 || trTextContent.indexOf(substring1) !== -1) {
  9. //do something
  10. } else {
  11. posToRemove.push(i);
  12. }
  13. }
  14. for (i = 0; i < posToRemove.length; i++) {
  15. trTags[posToRemove[i]].remove();
  16. }
  1. <table>
  2. <tbody>
  3. <tr>
  4. <td><a href="https://example.org">Foo</a></td>
  5. <td>Description</td>
  6. <td>2019</td>
  7. </tr>
  8. <tr>
  9. <td><a href="https://example.org">Test</a></td>
  10. <td>Description</td>
  11. <td>2018</td>
  12. </tr>
  13. <tr>
  14. <td>Bar</td>
  15. <td>Description</td>
  16. <td>2017</td>
  17. </tr>
  18. <tr>
  19. <td><a href="https://example.org">Foo</a></td>
  20. <td>Description</td>
  21. <td>2019</td>
  22. </tr>
  23. <tr>
  24. <td><a href="https://example.org">Test</a></td>
  25. <td>Description</td>
  26. <td>2018</td>
  27. </tr>
  28. <tr>
  29. <td>Bar</td>
  30. <td>Description</td>
  31. <td>2017</td>
  32. </tr>
  33. <tr>
  34. <td>Bar</td>
  35. <td>Description</td>
  36. <td>2017</td>
  37. </tr>
  38. <tr>
  39. <td>Bar</td>
  40. <td>Description</td>
  41. <td>2017</td>
  42. </tr>
  43. <tr>
  44. <td><a href="https://example.org">Foo</a></td>
  45. <td>Description</td>
  46. <td>2019</td>
  47. </tr>
  48. <tr>
  49. <td><a href="https://example.org">Foo</a></td>
  50. <td>Description</td>
  51. <td>2019</td>
  52. </tr>
  53. <tr>
  54. <td><a href="https://example.org">Test</a></td>
  55. <td>Description</td>
  56. <td>2018</td>
  57. </tr>
  58. </tbody>
  59. </table>

可悲的是,它没有按预期工作.它不会仅在表中保留包含这两个字符串之一的元素.我已经检查了保存在数组中的位置,并且都是正确的.

最佳答案
.push()代替i的posToRemove元素,并用trToTags [i] .remove()替换posToRemove [i] .remove().此外,每个字符串的第一个字符都应大写而不是小写,以匹配“ Foo”和“ Bar”.

  1. var posToRemove = [];
  2. var tbody = document.getElementsByTagName("tbody")[0];
  3. var trTags = tbody.getElementsByTagName("tr");
  4. var substring0 = "Foo";
  5. var substring1 = "Bar";
  6. for (let i = 0; i < trTags.length; i++) {
  7. var trTextContent = trTags[i].textContent;
  8. if (trTextContent.indexOf(substring0) !== -1 || trTextContent.indexOf(substring1) !== -1) {
  9. //do something
  10. } else {
  11. posToRemove.push(trTags[i]);
  12. }
  13. }
  14. for (let i = 0; i < posToRemove.length; i++) {
  15. posToRemove[i].remove();
  16. }
  1. <table>
  2. <tbody>
  3. <tr>
  4. <td><a href="https://example.org">Foo</a></td>
  5. <td>Description</td>
  6. <td>2019</td>
  7. </tr>
  8. <tr>
  9. <td><a href="https://example.org">Test</a></td>
  10. <td>Description</td>
  11. <td>2018</td>
  12. </tr>
  13. <tr>
  14. <td>Bar</td>
  15. <td>Description</td>
  16. <td>2017</td>
  17. </tr>
  18. </tbody>
  19. </table>

猜你在找的HTML相关文章