title: Slick slider error: TypeError: o[i].slick is undefined
body: <p>I'm trying to make it so that when the search button is pressed it will clear the previous search results from the screen and create the new search results. However when I do this, I get a slick slider error and all my items line up vertically. I'm not exactly sure if the thing I'm trying to do is possible to do with slick slider because I am essentially creating the <code>search-slider</code> div. When I don't remove() my <code>search-slider</code>div, the previous results will be loaded next to the old results but they will be rendered by slick slider. I'm not sure where I should go from here.</p>
  
  <p>FYI, the snippet will not run on here. I made it for ease of looking at the code.
  If anyone could help, it would be greatly appreciated. Thanks.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
  
  
        $('#search').click(function() {
              var nameVal = $('#shouhinName').val();
              var makerVal = $('#makerName').val();
              var categoryVal = $('#selectText').val();
              var sliderVal = $('#hideme').val();
  
              $.ajax({
                    type: "POST",
                    url: "shelf/test",
                    data: {
  
  
                      shouhinName: nameVal,
                      makerName: makerVal,
                      selectText: categoryVal,
                      best: sliderVal
  
                    },
                    success: function hi(j_data) {
  
  
  
  
                        alert(j_data.url);
                        // create a new div element 
                        //const images = j_data;
                        //   console.log(imagePath);
                        /*   for (const image of imagePath) {
  
                                const img = document.createElement("img");
                                if (image.slice(0, 5) == "shelf") {
                                      img.src = `/check/assets/img/${image}`;
                                } else {
                                      img.src = '/check/assets/img/noimage.png';
                                }
  
                                img.classList.add("new");
                                var div = document.createElement("div");
                                div.id = `${image}`
                                div.classList.add("image");
                                linebreak = document.createElement("br");
  
                                // div.classList.add("column");
                                document.getElementById('search-slider').appendChild(div);
  
                                // document.getElementById('rows').appendChild(div);
                                //img.setAttribute("style", "text-align: center;"); 
                                // document.body.appendChild(img);
  
                                document.getElementById(image).appendChild(img);
  
  
                          } */
  
                        console.log(j_data);
                        //  console.log(images);
  
                        let index = 0;
                        const display = "table"; // or "grid" if horizontal, but this migh depend where you place the rest of the code, cause i added the style to the body
                        const x = 0;
                        const y = 0;
                        document.body.style.display = display;
                        $('#search-slider').remove();
                        //  function createHTML() {
                        //  console.log("E: Execute &amp; R: Request &amp; I: Informative");
                        //loop to go true all images
  
                        const search = document.createElement("div");
                        search.id = 'search-slider';
                        search.className = "search-items";
                        console.log(search.id);
                        document.getElementById("divbox").appendChild(search);
                        for (const image of j_data.url) {
                          // console.log();
                          //each image will correspond to a canvas element
                          const canvas = document.createElement("canvas");
                          const ctx = canvas.getContext("2d");
  
  
  
                          //each canvas element will has is own properties (in this case all the same)
                          canvas.id = "option" + [index];
                          var canId = canvas.id;
                          var tooltip = j_data.tooltip;
  
                          //   console.log(tooltip[index]);
                          // tooltip is the array
                          // var tooltipSel = document.getElementById(canId);
  
                          /* canvas.height = images.height;
                          canvas.width = images.width; */
                          // canvas.setAttribute('heigth', '0');
                          canvas.setAttribute('width', '75px');
                          canvas.setAttribute('padding-top', '56.25%');
                          canvas.setAttribute('object-fit', 'contain');
                          canvas.setAttribute('data-html', 'true');
                          // canvas.title = "hi";
                          // console.log('#'+ canvas.id);
  
                          var div = document.createElement("div");
                          div.setAttribute('data-html', 'true');
                          div.id = j_data.itemid[index]; //image.slice(26, 34);
                          // $('#'+div.id).remove();
                          /* var itemID = div.id;
                          var itemidArray = [];
                          itemidArray = itemID; */
                          //   console.log(itemidArray);
  
                          console.log(div.id);
                          //   canvas.style.padding = "10px";
                          // canvas.classList.add("suiteiCanvas");
                          //function to get the corresponded image of that particular canvas element
                          drawImages(canvas);
                          //add an event listener for when a user click on the particular canvas
  
                          canvas.addEventListener("click", optionClicke, false);
  
                          //all html part was handle we can append it to the body
                          // document.body.appendChild(canvas);
  
                          //console.log(image);
                          var text = j_data.tooltip[index];
                          /* div.title = "";
                          $('#' + div.id).data('powertip', function() {
                                return div.title = tooltip[index];
                          }); */
                          div.title = text;
                          document.getElementById('search-slider').appendChild(div);
                          document.getElementById(div.id).appendChild(canvas);
                          //  $(div.id).prepend(text);
                          index++;
                        }
                        //  }
  
                        //  console.log(itemidArray);
  
                        function drawImages(canvas) {
                          //we need to use the getContext canvas function to draw anything inside the canvas element
                          const ctx = canvas.getContext("2d");
                          const background = new Image();
  
                          // for text
  
                          //This is needed because if the drawImage is called from a different place that the createHTML function
                          //index value will not be at 0 and it will for sure with an heigher id that the one expected
                          //so we are using regex to remove all letters from the canvas.id and get the number to use it later
                          index = canvas.id.replace(/\D/g, "");
  
                          //console.log('E: Drawing image ' + index + ' on canvas ' + canvas.id);
  
                          //get the image url using the index to get the corresponded image
                          // background.src = images.url[index];
                          if (j_data.url[index] !== '/check/assets/img/noimage.png') {
                            background.src = "/check/assets/img/" + j_data.url[index];
                          } else {
                            background.src = '/check/assets/img/noimage.png'
                          }
  
  
                          //no idea why but to place the image, we need to use the onload event
                          //https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage
                          background.onload = function() {
  
                            ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
                          };
                          /* background.onerror = function() {
                                const text = "インバ ど";
                                ctx.fillText(text, 0, 0 + 10 * 1);
                          }; */
                        }
  
                        function drawX(canvas, item) {
                          const ctx = canvas.getContext("2d");
  
                          //   console.log("E: Placing X on canvas " + canvas.id);
  
                          ctx.beginPath();
                          ctx.arc(40, 75, 25, 0, 2 * Math.PI, false);
                          ctx.lineWidth = 5;
                          ctx.strokeStyle = "#FF0000";
                          ctx.closePath();
                          ctx.stroke();
                          console.log(item);
                          hdnName.value = item;
  
                        }
  
                        /*  function fillTextLine(canvas, x, y) {
                               var text = "インバ ど";
                               const ctx = canvas.getContext("2d");
                               var textList = text.split("　");
                               var lineHeight = ctx.measureText("あ").width;
                               textList.forEach(function(text, i) {
                                     ctx.fillText(text, x, y + lineHeight * i);
                               });
                         } */
  
                        function clear(canvas) {
                          //   console.log("E: clearing canvas " + canvas.id);
  
                          canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
  
                          drawImages(canvas);
  
  
                        }
  
                        function optionClicke(e) {
                          log = true;
                          const canvas = document.getElementsByTagName("canvas");
                          var hdnName = document.getElementById("sendServ");
                          let index = 0;
  
  
                          for (const option of canvas) {
                            if (log)
                              //  console.log("I: User clicked at option " + e.target.id + ":" + option.id);
                              log = false;
                            if (e.target.id === option.id) {
                              // console.log("R: Drawing request at canvas " + option.id);
                              // console.log(j_data.itemid[index]);
                              const item = j_data.itemid[index];
                              console.log('draw' + item);
                              console.log(index);
                              drawX(option, item);
  
                            } else {
                              //   console.log("R: Clearing request at canvas " + option.id);
                              clear(option);
                              //console.log('clear'+item);
                            }
                            index++;
                          }
  
                        }
  
  $('.search-items').slick('unslick').slick('reinit');
  $(document).ready(function() {
    $('.search-items').not('.slick-initialized').slick({
      infinite: false, //true
      slidesToShow: 8,
      slidesToScroll: 8,
      arrows: true,
      centerMode: false,
      width: 200,
      prevArrow: $('.prev'),
      nextArrow: $('.next')
    });
  });
  
  
  
  
  
  //  console.log(j_data);
  // need to do my image processing in here 
  },
  error: function(xhr, status, error) {
      console.log("post error");
      console.log(error);
      alert(error);
    },
    complete: function(xhr, status) {
      console.log("fin");
    },
  });
  });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.search-items{
    max-width: 1800px;
    
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="search-items" id="search-slider"&gt;
                    
  
  
                    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>