javascript - 通过索引值从数组中删除项目-6ren

javascript - 通过索引值从数组中删除项目

转载作者：行者123 更新时间：2023-12-01 02:46:40

25

4

我希望能够删除以下数组中的任何独立项目(cherry pick)并将其删除，这样它就不会显示在 dom 中。我想通过它的索引号来做到这一点。

例如我可以通过

记录它

console.log(div.questions[2]);

我可以使用什么来从 dom 中删除 div.questions[2] 而无需刷新？

还可以通过向按钮添加事件来完成此操作，以便无需刷新屏幕即可更改显示的事件吗？

最终我想做的是让一些问题沿着一条路径走下去，然后它会跳到其余的常规问题。

HTML

<html>
<head>

<title>AlsSate Quiz Prototype</title>
<link href ="style.css" rel ="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<script src="jquery-3.2.1.min.js"></script>
<script src = "main.js"></script>

</head>


<body>

<div class="container">
</div>



</html>

代码(来自main.js)

$( document ).ready(function() {



   var div = {
        questions: [
          {
            title: "what vehicle",
            description: "1 Lorem ipsum dolor sit amet, consectetur adipiscing",
            btn1:"car",
            btn2:"motorcycle"
          },
          {
            title: "what brand",
            description: "2 Lorem ipsum dolor sit amet, consectetur adipiscing",
               btn1:"honda",
            btn2:"harley"
          },
          {
            title: "what car",
            description: "3 Lorem ipsum dolor sit amet, consectetur adipiscing",
               btn1: "chevy",
            btn2: "ford"
          },
          {
            title: "how many miles do you drive a week",
            description: "4 Lorem ipsum dolor sit amet, consectetur adipiscing",
               btn1: "500",
            btn2: "100"
          }        
        ]
      };
   //div.questions=div.questions.slice(0,3); 
//div.questions=div.questions.splice(1,3); 





    $.each(div.questions,function(i,x){
     $('.container').append('<div class="wrapper"><h3>'+x.title+'<p>'+x.description+'</p></h3> '+x.btn1+' '+x.btn2+'</div>')
    })

console.log(div.questions[0]);

//var hide =div.questions[1]
//hide.hide();



});//end ready

最佳答案

如果我正确理解了这个问题，您只是想从数据数组中创建 DOM 对象，并且还可以通过单击某些内容来删除这些 DOM 元素。

一种方法是将新对象的引用实际存储在数组项中。在本例中，我将每个新 DOM 对象添加到名为“obj”的新节点中的数组(请参阅循环)。

我还添加了一个接受数组索引的方法，并将使用该索引从数组节点中定位该对象，并使用 jQuery 的 remove() 方法将其删除(因为您使用的是 jQuery 和可能更熟悉它)。

请注意，这并不会从问题中删除数组项，因为我认为这不是您的意图，而只是删除 dom 对象。

$( document ).ready(function() {
   var div = {
        questions: [
          {
            title: "what vehicle",
            description: "1 Lorem ipsum dolor sit amet, consectetur adipiscing",
            btn1:"car",
            btn2:"motorcycle"
          },
          {
            title: "what brand",
            description: "2 Lorem ipsum dolor sit amet, consectetur adipiscing",
               btn1:"honda",
            btn2:"harley"
          },
          {
            title: "what car",
            description: "3 Lorem ipsum dolor sit amet, consectetur adipiscing",
               btn1: "chevy",
            btn2: "ford"
          },
          {
            title: "how many miles do you drive a week",
            description: "4 Lorem ipsum dolor sit amet, consectetur adipiscing",
               btn1: "500",
            btn2: "100"
          }        
        ]
      };

    $.each(div.questions,function(i,x){
  
      var newDiv = document.createElement("div"); 
      newDiv.innerHTML = '<h3>'+x.title+'<p>'+x.description+'</p></h3> '+x.btn1+' '+x.btn2; 
      newDiv.className += 'wrapper';
      
      div.questions[i]['obj'] = newDiv;

     $('.container').append(newDiv)
    });
    
   function removeByArrayIndex(indx) {
      $(div.questions[indx]['obj']).remove();
   };
   
   $("button").on('click',function() {
     removeByArrayIndex($(this).attr("rel"));
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>

<title>AlsSate Quiz Prototype</title>
<link href ="style.css" rel ="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<script src="jquery-3.2.1.min.js"></script>
<script src = "main.js"></script>

</head>


<body>

<button rel="0">Remove 1</button>
<button rel="1">Remove 2</button>
<button rel="2">Remove 3</button>
<button rel="3">Remove 4</button>

<hr/>


<div class="container">
</div>


</body>
</html>

关于javascript - 通过索引值从数组中删除项目，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47213366/

25

4

0

文章推荐： jquery - $.ajax 中返回的 HTML 片段无法被遍历

文章推荐： javascript - 在高 map 中使用自定义边界

文章推荐： python - 热图中转置混淆矩阵的原因

html - Z 索引 - 滑动过渡重叠有没有办法创建动态 z 索引？
这几天我一直在努力。我一直在自学 CSS，所以对菜鸟好一点。我正在创建一个推荐 slider 。推荐以 3 个 block 显示。我希望前 2 个下降，第 3 个上升。但是当 slider 激活时，无
node.js - 索引.ejs VS 索引.html
我最近开始学习 Nodejs，现在我很困惑我的网络应用程序使用什么，html 还是 ejs (Express)。 Ejs 使用 Express 模块，而 .html 使用 HTML 模块。我的第一个问
sql - 跨两列/数组的 PostgreSQL 搜索/索引(GIN 索引？)
假设我们有一个 PostgreSQL 表contacts，每条记录都有一堆带标签的电子邮件地址(标签和电子邮件对)——其中一个是“主要”。存储方式如下: id 主键电子邮件文本 email_la
Tesseract 索引 >= 0 && 索引 < size_used_ :Error:Assert failed Error
我成功为一种新的tesseract语言编写了traineddata文件，但是当我完成时，我继续收到以下错误: index >= 0 && index = 0 && 索引 < size_used_ :E
python - .loc[索引, 列] 和 .loc[索引][列] 之间有什么区别？
这个问题已经有答案了: How to deal with SettingWithCopyWarning in Pandas (21 个回答) 已关闭 4 年前。假设我有一个像这样的数据框，第一列“密
Android - 从位置 A(索引)检查位置 B(索引)是否在 GridView 布局中与它成对角线，而不管是否接近
如果我有一个位置或行/列同时用于 A 和 B 位置，请检查 B 是否与 A 成对角线？ 1 2 3 4 5 6 7 8 9 例如，我如何检查 5 是否与 7 成对角线？此外，如果我检查 4 是
MongoDB：索引
MongoDB：索引一、创建索引默认情况下，集合中的_id字段就是索引，我们可以通过getIndexes()方法来查看一个集合中的索引 > db.user.getIndexes() [ { "v
MongoDB——索引
一、索引介绍索引是一种用来快速查询数据的数据结构。 B+Tree就是一种常用的数据库索引数据结构，MongoDB采用B+Tree 做索引，索引创建在colletions上。 MongoDB不使用索引
SQLite 索引
我无法决定索引。就像我有下面的查询需要太多时间来执行: select count(rn.NODE_ID) as Count, rnl.[ISO_COUNTRY_CODE] as Cou
MySQL查询优化——索引
我有这些表: CREATE TABLE `cstat` ( `id_cstat` bigint(20) NOT NULL, `lang_code` varchar(3) NOT NULL,
mysql表性能升级(索引
我正在尝试找到一种方法来提高包含 IP 范围的 mysql 表的性能(在高峰时段每秒最多有 500 个 SELECT 查询(!)，所以我有点担心)。我有一个这种结构的表: id smallint(
jquery 索引()
jquery index() 似乎无法识别元素之一，总是说“无法读取未定义的属性‘长度’”这是我的代码。mnumber 是导致问题的原因。我需要 number 和 mnumber 才能跟踪使用鼠标，并
MongoDB 索引
我们有一个包含近 4000 万条记录的 MongoDB 集合。该集合的当前大小为 5GB。此集合中存储的数据包含以下字段: _id: "MongoDB id" userid: "user id" (i
MongoDB 索引
文档说:如果你有多个字段的复合索引，你可以用它来查询字段的开始子集。所以如果你有一个索引一个，乙，丙你可以用它查询一种一个，乙a,b,c 我的问题是，如果我有一个像这样的复合索引一个，乙，丙我可以查询
jQuery .each() 索引？
我正在使用 $('#list option').each(function(){ //do stuff }); 循环列表中的选项。我想知道如何获取当前循环的索引？因为我不想让 var i = 0;循
快速了解MySQL 索引
MySQL索引的建立对于MySQL的高效运行是很重要的，索引可以大大提高MySQL的检索速度。打个比方，如果合理的设计且使用索引的MySQL是一辆兰博基尼的话，那么没有设计和使用索引的MySQL
18、SQLite 索引
SQLite 索引（Index）索引（Index）是一种特殊的查找表，数据库搜索引擎用来加快数据检索。简单地说，索引是一个指向表中数据的指针。一个数据库中的索引与一本书后边的索引是非常相似的。
RavenDB MultiMap 索引
我是 RavenDB 的新手。我正在尝试使用多 map 索引功能，但我不确定这是否是解决我的问题的最佳方法。所以我有三个文件:Unit、Car、People。汽车文件看起来像这样: { Id: "
基于标准的 Excel 索引
我有以下数据，我想根据范围在另一个表中建立索引我想要实现的是，例如，如果三星的销售额为 2500，则折扣为 2%，低于 3000 且高于 1000 我知道它可以通过索引来完成，与多个数组匹配，然后指
SQL 索引 - 这是重叠的吗？
我正在检查并删除 SQL 数据库中的重复和冗余索引。所以如果我有两个相同的索引，我会删除。例如，如果我删除了重叠的索引... 索引1:品牌、型号指标二:品牌、型号、价格我删除索引 1。相同顺

首页

博学

6Ren·AI

商城

javascript - 通过索引值从数组中删除项目