删除div和不包含内容的

Question

我需要删除div和JQuery，我该怎么做？我没有主意 我尝试用.wrap（）来做，但是没用

实际上我有以下代码：

     <ul data-brackets-id="19137" id="navigationDesktop" class="navbar-nav w-100 justify-content-between test">
                                <li data-brackets-id="19138" class="active">
                                    <a data-brackets-id="19139" class="nav-link" href="#">Home</a>
                                </li>
                                <li data-brackets-id="19138" class="active">
                                    <a data-brackets-id="19139" class="nav-link" href="#">Home</a>
                                </li>
                                <li data-brackets-id="19140" class="">
                                    <a data-brackets-id="19141" class="nav-link" href="#">
                                        Offer <i data-brackets-id="19142" class="fas fa-angle-down"></i>
                                    </a>
                                    <div data-brackets-id="19143" style="left: 50%; transform: translateX(-50%);" class="dropdown-menu">
                                        <a data-brackets-id="19144" class="dropdown-item" href="#">Lorem ipsum</a>
                                        <a data-brackets-id="19145" class="dropdown-item" href="#">Lorem ipsum</a>
                                        <a data-brackets-id="19146" class="dropdown-item" href="#">Lorem ipsum</a>
                                    </div>
                                </li>
                            </ul>

我需要这个：

<ul data-brackets-id="19137" id="navigationDesktop" class="navbar-nav w-100 justify-content-between test">
                                <li data-brackets-id="19138" class="active">
                                    <a data-brackets-id="19139" class="nav-link" href="#">Home</a>
                                </li>
                                <li data-brackets-id="19138" class="active">
                                    <a data-brackets-id="19139" class="nav-link" href="#">Home</a>
                                </li>
                                <li data-brackets-id="19140" class="">
                                    <a data-brackets-id="19141" class="nav-link" href="#">
                                        Offer <i data-brackets-id="19142" class="fas fa-angle-down"></i>
                                    </a>
                                </li>
                                <li>
                                    <a data-brackets-id="19144" class="dropdown-item" href="#">Lorem ipsum</a>
                                </li>
                                <li>
                                    <a data-brackets-id="19145" class="dropdown-item" href="#">Lorem ipsum</a>
                                </li>
                                <li>
                                    <a data-brackets-id="19146" class="dropdown-item" href="#">Lorem ipsum</a>
                                </li>
                            </ul>

仅使用JQuery可以做到吗？

Answer 1

let navigationDesktop = $('#navigationDesktop'); // Select the navigation element
$('[data-brackets-id="19143"') // Select the element to be removed with an attribute selector
  .detach() // Detach it from the DOM
  .children() // Select it's children
  .each((_, child) => { // Loop through each element of the children collection
    navigationDesktop.append($('<li>').append(child)); // Append an newly created li to the navigation element and append the child to the new li
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul data-brackets-id="19137" id="navigationDesktop" class="navbar-nav w-100 justify-content-between test">
                                <li data-brackets-id="19138" class="active">
                                    <a data-brackets-id="19139" class="nav-link" href="#">Home</a>
                                </li>
                                <li data-brackets-id="19138" class="active">
                                    <a data-brackets-id="19139" class="nav-link" href="#">Home</a>
                                </li>
                                <li data-brackets-id="19140" class="">
                                    <a data-brackets-id="19141" class="nav-link" href="#">
                                        Offer <i data-brackets-id="19142" class="fas fa-angle-down"></i>
                                    </a>
                                    <div data-brackets-id="19143" style="left: 50%; transform: translateX(-50%);" class="dropdown-menu">
                                        <a data-brackets-id="19144" class="dropdown-item" href="#">Lorem ipsum</a>
                                        <a data-brackets-id="19145" class="dropdown-item" href="#">Lorem ipsum</a>
                                        <a data-brackets-id="19146" class="dropdown-item" href="#">Lorem ipsum</a>
                                    </div>
                                </li>
                            </ul>