Shopify Question posted in
The Shopify help center can be found here.

Replace all instances of html elements – Shopify

I’m trying to remove all instances of </div><div class="product-list_row"> and replace it with <!-- removed -->. But I’m having no luck getting this to work.

I’ve been trying all sorts of solutions, some I couldn’t get at all working, and others would only do the first instance.

I also can’t use a regex solution, since this is on my Shopify website, and their liquid code doesn’t work with regex.

I’ve been using this:

$(document).ready(function(){
    $('.product-list').html(function(index,html){
        return html.replace('</div><div class="product-list_row">', '<!-- so cool -->');
    });
})
.product-list {
  display:table;
  width:100%;
}
.product-list_row {
  display:table-row;
}
.product-list_item {
  display:inline-block;
  @media screen and (min-width: 1000px) {
    display:table-cell;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-list">
  <div class="product-list_row">
    <div class="product-list_item">1</div>
    <div class="product-list_item">2</div>
    <div class="product-list_item">3</div>
  </div>
  <div class="product-list_row">
    <div class="product-list_item">4</div>
    <div class="product-list_item">5</div>
    <div class="product-list_item">6</div>
  </div>
  <div class="product-list_row">
    <div class="product-list_item">7</div>
    <div class="product-list_item">8</div>
    <div class="product-list_item">9</div>
  </div>  
</div>

Should be this:

.product-list {
  display:table;
  width:100%;
}
.product-list_row {
  display:table-row;
}
.product-list_item {
  display:inline-block;
  @media screen and (min-width: 1000px) {
    display:table-cell;
  }
}
<div class="product-list">              
  <div class="product-list_row">
    <div class="product-list_item">1</div>
    <div class="product-list_item">2</div>
    <div class="product-list_item">3</div>
    <!-- removed -->
    <div class="product-list_item">4</div>
    <div class="product-list_item">5</div>
    <div class="product-list_item">6</div>
    <!-- removed -->
    <div class="product-list_item">7</div>
    <div class="product-list_item">8</div>
    <div class="product-list_item">9</div>
  </div>  
</div>
Tags:

6

Answers


  1. Chosen as BEST ANSWER
    0

    I had to reverse the way I thought about it. Instead of starting with hard coded element wrappers and trying to remove them and replace with another element (comments), instead I should have thought to add the wrapping divs every X elements. This is what I ended up referring to to get what I needed - Wrap and unwrap divs responsively. Thanks for the efforts though!


  2. 0

    that is because there are whitespaces between the </div> and <div class="product-list_row">

    try this instead:

    $(document).ready(function(){

    $('.product-list').html(function(index,html){
      return html.replace(/</div>s+<div class="product-list_row">/g, '<!-- so cool -->');
    });

})
    .product-list_row{
  margin: 10px 0;
  background: #eee;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-list">              
  <div class="product-list_row">
    <div class="product-list_item">1</div>
    <div class="product-list_item">2</div>
    <div class="product-list_item">3</div>
  </div>
  <div class="product-list_row">
    <div class="product-list_item">4</div>
    <div class="product-list_item">5</div>
    <div class="product-list_item">6</div>
  </div>
  <div class="product-list_row">
    <div class="product-list_item">7</div>
    <div class="product-list_item">8</div>
    <div class="product-list_item">9</div>
  </div>  
</div>

    as for the cause of replacing only the first occurrence, please read this helpful document

    Login or Signup to reply.
  3. 0

    Using regex is not nearly as reliable as using dom methods

    Move the child elements to first row and remove whole containers once emptied

    var $rows = $('.product-list .product-list_row'),
  $rowsToEmpty = $rows.slice(1);

$rows.first().append($rowsToEmpty.children())
$rowsToEmpty.remove()
    .product-list_row {
  border: 1px solid #ccc
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-list">
  <div class="product-list_row">
    <div class="product-list_item">1</div>
    <div class="product-list_item">2</div>
    <div class="product-list_item">3</div>
  </div>
  <div class="product-list_row">
    <div class="product-list_item">4</div>
    <div class="product-list_item">5</div>
    <div class="product-list_item">6</div>
  </div>
  <div class="product-list_row">
    <div class="product-list_item">7</div>
    <div class="product-list_item">8</div>
    <div class="product-list_item">9</div>
  </div>
</div>
    Login or Signup to reply.
  4. 0

    The best way to do this is to use the builtin jquery methods unwrap (which removes the parent element) and wrapInner to add a parent element to the children. Then the javascript simply becomes

    $(document).ready(function() {
  $('.product-list_item').unwrap();
  // This line is to put one single product-list_row around the entire thing
  $(".product-list").wrapInner('<div class="product-list_row">');
});

    $(document).ready(function() {
  $('.product-list_item').unwrap();
  $(".product-list").wrapInner('<div class="product-list_row">');
})
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-list">

  <div class="product-list_row">
    <div class="product-list_item">1</div>
    <div class="product-list_item">2</div>
    <div class="product-list_item">3</div>
  </div>
  <div class="product-list_row">
    <div class="product-list_item">4</div>
    <div class="product-list_item">5</div>
    <div class="product-list_item">6</div>
  </div>
  <div class="product-list_row">
    <div class="product-list_item">7</div>
    <div class="product-list_item">8</div>
    <div class="product-list_item">9</div>
  </div>

</div>
    Login or Signup to reply.
  5. 0

    Add id="product" for the class="product-list". Then you can do:

    var newDiv = document.getElementById('product').innerHTML;
var unwanted = '</div><div class="product-list_row">';
var comment='<!-- so cool -->';
newDiv = newDiv.split(unwanted).join(comment);
document.getElementById('product').innerHTML = newDiv;
    <div class="product-list" id="product">
    Login or Signup to reply.
  6. 0 
    $(document).ready(function() {
    var length = $('.product-list .product-list_row').size();
    $('.product-list .product-list_row').each(function(index, obj) {
        if (length - 1 != index) {
            $(this).after('<!-- so cool -->');
        }
    });
})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search