Removing Item from array by it's index value

Question

I would like to be able to remove any isolated item (cherry pick)in the following array and remove it so it won't display in the dom. I would like to do this by it's index number.

For example I can log it by

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

what can I use to remove div.questions[2] from the dom without a refresh?

Also can this be done by adding an event to a button so it would change which ones were displayed without having to refresh the screen?

Ultimately what I'm trying to do do is have some questions go down a path and then it would skip to the rest of the regular questions.

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>

Code (from 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

@Taryn East it works in displaying the divs -I just want to access any one(or more as needed) of them individually and remove them rather than by looping through them after they are displayed. — namretiolnave
– namretiolnave, Commented Nov 9, 2017 at 23:38

Robert Wade · Accepted Answer · 2017-11-10 00:17:23Z

If I understand the question correctly you simply want to create DOM objects from your array of data, and also be able to remove those DOM elements by clicking on something.

One way to do that would be to actually store the reference to the new objects in the array item. In this case I added each new DOM object to the array (see the loop) in a new node called 'obj'.

I also added a method that accepts an array index, and will locate that object from the array node with that index and remove it using jQuery's remove() method (since you're using jQuery and probably more familiar with it).

Note that this does not also remove the array item from questions, as I assumed that wasn't your intention, but simply to remove the dom objects.

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

sumit · Accepted Answer · 2017-11-10 00:18:13Z

1

Jquery will not rerender your component when you just remove the entry from array , you need to remove it from dom and then use some ajax or delete it from array if needed .

Your dom wont be refreshed when you just remove that specific entry from that . You need to remove it from dom as well

You can have one delete button inside .each iterator

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

and then have the function like below

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

}

answered Nov 10, 2017 at 0:18

sumit

15.5k14 gold badges75 silver badges113 bronze badges

Collectives™ on Stack Overflow

Removing Item from array by it's index value

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related