Question

我希望能够删除以下数组中的任何隔离项目（樱桃选择）并将其删除，以便它不会显示在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

Answer 1

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

这样做的一种方法是实际存储对数组项中新对象的引用。在这种情况下，我将每个新的DOM对象添加到一个名为＆＃39; obj＆＃39;的新节点中的数组（参见循环）。

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

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

＆＃13;

$( 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"));
   });
});

＆＃13;

<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>

＆＃13;

Answer 2

当您从数组中删除条目时，Jquery将不会重新呈现您的组件，您需要将其从dom中删除，然后使用某些ajax或在需要时从数组中删除它。

当您从中删除该特定条目时，您的dom将不会刷新。您还需要从dom中删除它

.each迭代器

中可以有一个删除按钮

<div class="wrapper"><h3>'+x.title+'<p>'+x.description+'</p></h3> '+x.btn1+' '+x.btn2+'<div onclick=deleteme(index)> <div></div>

然后具有如下所示的功能

function deleteme(obj,index){
   $(obj).closest('.wrapper').remove();
  //you can send some ajax call or remove array index now
     div.questions.splice(index,1) 

}

通过它的索引值从数组中删除Item

2 个答案: