Javascript 如何剥离除部分元素外的所有元素？

我正在生成

和sub

，我想做的是只将列表的html结构及其值放在其中。通过以下代码，我进入了文本区的所有

内容，而不仅仅是：

HTML

 <div id="mindMap">
   <ul class="list-unstyled margin-bottom-20">
      <li><button class="btn btn-default ul-appending margin-bottom-20">+ voce</button></li>
   </ul>
 </div> 

<div id="mindMapData">
  <textarea name="usp-custom-11" id="usp-custom-11" data-required="false" placeholder="Example Input 11" data-richtext="false" class="usp-input usp-textarea usp-form-365" rows="0" cols="30" style="margin: 0px; width: 871px; height: 291px;"></textarea>
</div>

在文本区域中，我获得了所有html文件：

<ul class="main_ul list-unstyled margin-bottom-20 newul">
  <li class="margin-bottom-20">
    <div class="input-group margin-bottom-20">
       <input placeholder="Aggiungi una voce..." class="form-control" type="text">
       <div class="input-group-btn">
         <button type="button" class="btn btn-default list">+ sotto voce</button>
         <button type="button" class="btn btn-default removeThis">elimina</button>
      </div>
   </div>
   <ul class="sub_ul list-unstyled margin-bottom-20">
     <li class="listSub margin-bottom-20">
       <div class="input-group margin-bottom-20">
         <input placeholder="Aggiungi una sotto voce..." class="form-control" type="text">
       <div class="input-group-btn">
         <button type="button" class="btn btn-default list">+ sotto voce</button>
         <button type="button" class="btn btn-default removeThis">elimina</button>
       </div>
     </div>
  </li>
</ul>

+声嘶力竭
伊莱米娜


+声嘶力竭
伊莱米娜

这是一个，请看文本区域中的内容是否错误，我正在尝试获取：

<ul>
  <li>Added node
    <ul>
      <li>Added sub node</li>
    </ul>
  </li>
 </ul>

添加节点

添加子节点

您可以使用以下代码遍历DOM：

function ul(indent) {
  indent = indent || 4;
  var node = $(this);
    return node.removeAttr('class').children().map(function() {
    var self = $(this);
    var value = self.find('> .input-group input').val();
    var sub_ul = self.find('> ul');
    var ul_spaces = new Array(indent+4).join(' ');
    var li_spaces = new Array(indent).join(' ');
    if (sub_ul.length && ul) {
        return li_spaces + '<li>' + value + '\n' + ul_spaces +
          '<ul>\n' + ul.call(sub_ul, indent+8) + '\n' + ul_spaces + '<ul>\n' +
          li_spaces + '</li>';
    } else {
        return li_spaces + '<li>' + value + '</li>';
    }
  }).get().join('\n');
}

function updateTree() {
   $("#mindMapData textarea").val('<ul>\n' + $("#mindMap").clone().find('.main_ul').map(ul).get().join('\n') + '\n</ul>');
}

功能ul（缩进）{
缩进=缩进| | 4；
var节点=$（此节点）；
返回node.removeAttr（'class'）.children（）.map（function（））{
var self=$（这是）；
var value=self.find（'>.input-group-input'）.val（）；
var sub_ul=self.find（'>ul'）；
var ul_spaces=新数组（缩进+4）.join（“”）；
var li_spaces=新数组（缩进）.join（“”）；
if（分段长度和分段长度）{
返回li_空格+'
'+value+'\n'+ul_空格+
“
\n'+ul.call（子ul，缩进+8）+”\n'+ul\u空格+“
\n”+
li_空格+“”；
}否则{
返回li_空格+'
'+value+'
'；
}
}).get（）.join（'\n'）；
}
函数updateTree（）{
$（“#mindmapdatatextarea”）.val（'
\n'+$（“#mindMap”）.clone（）.find（'.main#ul'）.map（ul.get（）.join（'\n'）+'\n
'）；
}

---

另一个注意事项是，您应该为每个输入调用keyup上的updateTree函数，因为当输入更改其值时，domsubtreemedic不会被激发，请参阅updatefiddle，我认为递归解析DOM树并过滤掉不需要的标记更容易理解。看看：

/**
 * @param {array<string>} allowedTags A list of tags that are allowed in the output
 * @returns {function} A function that takes a jQuery elements and returns a copy with only the allowed elements
 */
function filterElementsFactory(allowedTags) {
    allowedTags = allowedTags.map(function (tag) { return tag.toUpperCase(); });

    /**
     * @param {object} element jQuery element
     * @returns {documentFragment}
     */
    return function filterElements(element) {
        element = element.clone();
        var elementList = element.contents();
        var finalElem = document.createDocumentFragment();
        for (element of elementList) {
            if (element.nodeType === Node.TEXT_NODE) {
                finalElem.appendChild(element);
            } else if (element.nodeType === Node.ELEMENT_NODE) {
                if (allowedTags.indexOf(element.tagName) !== -1) {
                    var elemFrame = document.createElement(element.tagName);
                    elemFrame.appendChild(filterElements($(element)))
                    finalElem.appendChild(elemFrame);
                } else {
                    finalElem.appendChild(filterElements($(element)));
                }
            } 
        };
        return finalElem;
    }
}

/**
*@param{array}允许标记输出中允许的标记列表
*@returns{function}接受jQuery元素并返回仅包含允许元素的副本的函数
*/
函数filterElementsFactory（allowedTags）{
allowedTags=allowedTags.map（函数（tag）{return tag.toUpperCase（）；}）；
/**
*@param{object}元素jQuery元素
*@returns{documentFragment}
*/
返回函数筛选器元素（元素）{
element=element.clone（）；
var elementList=element.contents（）；
var finalElem=document.createDocumentFragment（）；
for（元素列表的元素）{
if（element.nodeType===Node.TEXT\u节点）{
finalElem.appendChild（元素）；
}else if（element.nodeType==Node.element\u Node）{
if（allowedTags.indexOf（element.tagName）！=-1）{
var elemFrame=document.createElement（element.tagName）；
elemFrame.appendChild（filterElements（$（元素）））
finalElem.appendChild（elemFrame）；
}否则{
finalElem.appendChild（filterElements（$（元素））；
}
} 
};
返回finalElem；
}
}

您可以这样使用：

$("#mindMap").on("DOMSubtreeModified",function(){
   $("#mindMapData textarea").val($("#mindMap").html());
});

var allowedTags = ['ul', 'li'];
var filterElements = filterElementsFactory(allowedTags);
$("#mindMap").on("DOMSubtreeModified",function(){
   var placeholderDiv = $('<div/>').append(filterElements($("#mindMap")));
   $("#mindMapData textarea").val(placeholderDiv.html());
});

var allowedTags=['ul'，'li']；
变量filterElements=filterElementsFactory（allowedTags）；
$（“#思维导图”）。在（“domsubertreemodified”，function（）上{
var placeholder div=$（''）.append（filterElements（$（“#思维导图”）；
$（“#mindMapData textarea”）.val（placeholder div.html（））；
});

var allowedTags = ['ul', 'li'];
var filterElements = filterElementsFactory(allowedTags);
$("#mindMap").on("DOMSubtreeModified",function(){
   var placeholderDiv = $('<div/>').append(filterElements($("#mindMap")));
   $("#mindMapData textarea").val(placeholderDiv.html());
});