使用w3data.js并想要删除外部DIV

Question

虽然我们在HTML输出渲染中添加了HTML，但在DIV中。如果我们添加了类似下面的内容

SqlConnection

但是输出渲染已经包含了

<div class="test" w3-include-html="template_build/header/header-classic.html"></div>

我想删除div class =＆＃34; test＆＃34;关于w3data.js上的渲染过程。

有人可以帮助我吗？

Answer 1

Snippet 1具有一个简单的函数，可以从任何给定元素中删除任何给定的属性。 Snippet 2是w3data.js，额外的一行是126：

elmnt.removeAttribute("class");

您可以使用其中任何一个获得相同的结果

SNIPPET 1

removeAttr(".test", "class");

function removeAttr(target, attribute) {
  var target = document.querySelector(target);
  target.removeAttribute(attribute);
}

.test { color:red }

<div class="test">THIS CONTENT SHOULD BE BLACK TEXT, NOT RED</div>

SNIPPET 2

/* W3Data ver 1.31 by W3Schools.com */
var w3DataObject = {};

function w3DisplayData(id, data) {
  var htmlObj, htmlTemplate, html, arr = [],
    a, l, rowClone, x, j, i, ii, cc, repeat, repeatObj, repeatX = "";
  htmlObj = document.getElementById(id);
  htmlTemplate = w3InitTemplate(id, htmlObj);
  html = htmlTemplate.cloneNode(true);
  arr = w3GetElementsByAttribute(html, "w3-repeat");
  l = arr.length;
  for (j = (l - 1); j >= 0; j -= 1) {
    cc = arr[j].getAttribute("w3-repeat").split(" ");
    if (cc.length == 1) {
      repeat = cc[0];
    } else {
      repeatX = cc[0];
      repeat = cc[2];
    }
    arr[j].removeAttribute("w3-repeat");
    repeatObj = data[repeat];
    if (repeatObj && typeof repeatObj == "object" && repeatObj.length != "undefined") {
      i = 0;
      for (x in repeatObj) {
        i += 1;
        rowClone = arr[j];
        rowClone = w3NeedleInHaystack(rowClone, "element", repeatX, repeatObj[x]);
        a = rowClone.attributes;
        for (ii = 0; ii < a.length; ii += 1) {
          a[ii].value = w3NeedleInHaystack(a[ii], "attribute", repeatX, repeatObj[x]).value;
        }
        (i === repeatObj.length) ? arr[j].parentNode.replaceChild(rowClone, arr[j]): arr[j].parentNode.insertBefore(rowClone, arr[j]);
      }
    } else {
      console.log("w3-repeat must be an array. " + repeat + " is not an array.");
      continue;
    }
  }
  html = w3NeedleInHaystack(html, "element");
  htmlObj.parentNode.replaceChild(html, htmlObj);

  function w3InitTemplate(id, obj) {
    var template;
    template = obj.cloneNode(true);
    if (w3DataObject.hasOwnProperty(id)) {
      return w3DataObject[id];
    }
    w3DataObject[id] = template;
    return template;
  }

  function w3GetElementsByAttribute(x, att) {
    var arr = [],
      arrCount = -1,
      i, l, y = x.getElementsByTagName("*"),
      z = att.toUpperCase();
    l = y.length;
    for (i = -1; i < l; i += 1) {
      if (i == -1) {
        y[i] = x;
      }
      if (y[i].getAttribute(z) !== null) {
        arrCount += 1;
        arr[arrCount] = y[i];
      }
    }
    return arr;
  }

  function w3NeedleInHaystack(elmnt, typ, repeatX, x) {
    var value, rowClone, pos1, haystack, pos2, needle = [],
      needleToReplace, i, cc, r;
    rowClone = elmnt.cloneNode(true);
    pos1 = 0;
    while (pos1 > -1) {
      haystack = (typ == "attribute") ? rowClone.value : rowClone.innerHTML;
      pos1 = haystack.indexOf("{{", pos1);
      if (pos1 === -1) {
        break;
      }
      pos2 = haystack.indexOf("}}", pos1 + 1);
      needleToReplace = haystack.substring(pos1 + 2, pos2);
      needle = needleToReplace.split("||");
      value = undefined;
      for (i = 0; i < needle.length; i += 1) {
        needle[i] = needle[i].replace(/^\s+|\s+$/gm, ''); //trim
        //value = ((x && x[needle[i]]) || (data && data[needle[i]]));
        if (x) {
          value = x[needle[i]];
        }
        if (value == undefined && data) {
          value = data[needle[i]];
        }
        if (value == undefined) {
          cc = needle[i].split(".");
          if (cc[0] == repeatX) {
            value = x[cc[1]];
          }
        }
        if (value == undefined) {
          if (needle[i] == repeatX) {
            value = x;
          }
        }
        if (value == undefined) {
          if (needle[i].substr(0, 1) == '"') {
            value = needle[i].replace(/"/g, "");
          } else if (needle[i].substr(0, 1) == "'") {
            value = needle[i].replace(/'/g, "");
          }
        }
        if (value != undefined) {
          break;
        }
      }
      if (value != undefined) {
        r = "{{" + needleToReplace + "}}";
        if (typ == "attribute") {
          rowClone.value = rowClone.value.replace(r, value);
        } else {
          w3ReplaceHTML(rowClone, r, value);
        }
      }
      pos1 = pos1 + 1;
    }
    return rowClone;
  }

  function w3ReplaceHTML(a, r, result) {
    var b, l, i, a, x, j;
    if (a.hasAttributes()) {
      b = a.attributes;
      l = b.length;
      for (i = 0; i < l; i += 1) {
        if (b[i].value.indexOf(r) > -1) {
          b[i].value = b[i].value.replace(r, result);
        }
      }
    }
    x = a.getElementsByTagName("*");
    l = x.length;
    a.innerHTML = a.innerHTML.replace(r, result);
  }
}

function w3IncludeHTML() {
  var z, i, elmnt, file, xhttp;
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    file = elmnt.getAttribute("w3-include-html");
    if (file) {
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          elmnt.innerHTML = this.responseText;
          elmnt.removeAttribute("w3-include-html");
          elmnt.removeAttribute("class"); // Add this expression 
          w3IncludeHTML();
        }
      }
      xhttp.open("GET", file, true);
      xhttp.send();
      return;
    }
  }
}

function w3Http(target, readyfunc, xml, method) {
  var httpObj;
  if (!method) {
    method = "GET";
  }
  if (window.XMLHttpRequest) {
    httpObj = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    httpObj = new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (httpObj) {
    if (readyfunc) {
      httpObj.onreadystatechange = readyfunc;
    }
    httpObj.open(method, target, true);
    httpObj.send(xml);
  }
}