entfernen Elemente, nachdem einige bestimmte Element

Question

Ich habe eine Liste von Artikel

<ul> 
    <li> 
     <ul class="remove"> 
      <li>1</li> 
     </ul> <--Remove 
     <ul> 
      <li>2</li> 
     </ul> <--Remove 
     <ul> 
      <li>3</li> 
     </ul> // .remove ul ends here 
    </li> 
</ul> 

Gibt es eine Möglichkeit die ganze Schluss-Tag zu löschen, die ich Pfeil nach der Klasse .remove gezeigt haben ??

Answer 1

jQuery arbeitet mit einem gültigen DOM, sodass Sie nicht einfach die schließenden Tags entfernen können. Mit Hilfe von JavaScript können Sie die schließenden Tags entfernen, sondern nur in einer String-Variablen:

var ul = $('ul.remove').siblings('ul'); 
 
var removed = ""; 
 
for (var i = 0; i < ul.length; i++) { 
 
    removed += ul[i].outerHTML.substring(0, ul[i].outerHTML.length - 5); 
 
} 
 

 

 
alert(removed);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <ul class="remove"> 
 
     <li>1</li> 
 
    </ul> 
 
    <ul> 
 
     <li>2</li> 
 
    </ul> 
 
    <ul> 
 
     <li>3</li> 
 
    </ul> 
 
    </li> 
 
</ul>

Ich weiß nicht, von einem guten Weg, es zu platzieren zurück in den DOM weil Sobald Sie das getan haben, wird der Browser gültigen HTML-Code erstellen, indem er diese schließenden Tags zurückfügt. Die einzige schlechte Weise, die ich mir vorstellen kann, ist, die String-Variable direkt in einer Datei (zusammen mit dem Rest des HTML) zu speichern, aber offensichtlich kann das nicht von einer Website getan werden und wahrscheinlich nicht das, was Sie wollen.

Aber warum möchten Sie die schließenden Tags trotzdem entfernen? Wenn Sie die ul s in den ersten mit der Klasse „entfernen“, um tatsächlich zusammenführen wollten, dann können Sie Parvan Antwort folgen, aber ich finde den Code leichter zu verstehen und kann ein bisschen schneller:

var remove = $('ul.remove'); 
 
var siblings = remove.siblings('ul'); 
 
remove.append(siblings.children()); 
 
siblings.remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <ul class="remove"> 
 
     <li>1</li> 
 
    </ul> 
 
    <ul> 
 
     <li>2</li> 
 
    </ul> 
 
    <ul> 
 
     <li>3</li> 
 
    </ul> 
 
    </li> 
 
</ul>