Remove line from grouped questions/list | XM Community
Skip to main content

I have a question that I have this code applied to

Qualtrics.SurveyEngine.addOnload(function() {
    var questionID = this.getQuestionContainer().id;

    var lastListItem = document.querySelector('#' + questionID + ' li:last-of-type');

    if (lastListItem) {

        lastListItem.style.borderTop = 'none';
        lastListItem.style.margin = '0';
        lastListItem.style.padding = '0';
    }

    var labels = document.querySelectorAll('#' + questionID + ' label');

    labels.forEach(function(label) {
        label.style.setProperty('margin-top', '0', 'important');
    });
});

However, as you can see from this picture, there are still lines appearing! 

How do I remove ALL the lines from this list? 

Would prefer JavaScript - if available - too! 

This is likely due to your css line

li:last-of-type { border-top: 2px solid #8D8D8D4D; 
}

that was mentioned in another thread of yours (How to get a line to NOT display! | XM Community) that cause each last list item to have the line, even if it is a list within a list.

 

Is this the only question in that page?

Perhaps you can try to add <style> within the HTML that targeting the specific portions?

 

I got it to work with this JavaScript

Qualtrics.SurveyEngine.addOnload(function () {
    // Create a <style> element
    var style = document.createElement('style');
    style.type = 'text/css';

    // Add the CSS rules
    style.innerHTML = `
        ul > li > ul > li:last-of-type {
            border-top: none;
        }
        ul > li:last-of-type {
            border-top: none;
        }
    `;

    // Append the <style> element to the <head> of the document
    document.head.appendChild(style);
});

 

Leave a Reply


Terms & Conditions