Удалить тег в jQuery

Question

Я хотел бы удалить первое вхождение тега, например, тег «p», который появляется над элементом, теперь этот тег может быть либо непосредственно над ним (предыдущий брат), либо он может быть предыдущим родным родителем , Я хотел бы сделать это в JQuery

<p>..</p> 
<span>abcd</span> 

<p>..</p> 
<div> 
<span>abcd</span> 

в обеих случаях я хотел бы удалить р тег с точки зрения SPAN в.

Answer 1

Вы можете найти близлежащий предыдущий номер <p> с помощью .prevAll() method вместе с .first(). Если результатом является непустой объект jQuery, то вы (очевидно) имеете совпадение, поэтому удалите его.

Если результатом является пустой объект jQuery, тогда не было подходящего брата, поэтому попробуйте ту же самую вещь, начиная с родителя текущего span, используя цикл, чтобы продолжать идти по дереву, насколько это необходимо.

(Если вы хотите проверить немедленным родственный элемента затем использовать .prev("p") вместо prevAll("p").first().)

$("span").click(function() { 
 
    // not sure how you're getting a reference to the starting span element, 
 
    // but assuming for demonstration purposes it is 'this' in an event handler 
 
    var current = $(this); 
 
    var prev; 
 

 
    while (!current.is("body")) { 
 
    prev = current.prevAll("p").first(); 
 
    if (prev.length > 0) { 
 
     prev.remove(); 
 
     break; 
 
    } 
 
    current = current.parent(); 
 
    } 
 
});

div { border: thin black solid; margin: 2px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<span>abcd</span> 
 
<p>..</p> 
 
<span>abcd</span> 
 

 
<p>..</p> 
 
<div> 
 
    <span>abcd</span> 
 
</div> 
 
<div> 
 
    <p>..</p> 
 
    <div>a div</div> 
 
    <span>abcd</span> 
 
</div> 
 
<p>..</p> 
 
<div> 
 
    <div> 
 
    <div> 
 
     <div> 
 
     <span>abcd</span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Я не уверен, если это демо-то, что вы ищете, но это может быть так:

Вы должны цикл всех p тегов и проверить, если он имеет next() родственные и удалить его и разбить петлю.

посмотреть DEMO:

// loop all p's 
 
$('p').each(function(ndx, elem) { 
 
    // if element has a next sibling 
 
    if ($(elem).next().length > 0) { 
 
    \t console.log('removed :', $(elem).text()); 
 

 
    \t $(elem).remove(); // remove this <p> tag 
 
     \t return false; // break out of loop 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>first p of body</p> 
 
<div class="container"> 
 
    <p>first p of container div</p> 
 
    <span>abcd</span> 
 
</div> 
 

 
<p>second p of body</p> 
 
<span>abcd</span> 
 

 
<p>third p of body</p> 
 
<div> 
 
<span>abcd</span>

Answer 3

Я понимаю, что вы хотите удалить p тег, который предыдущий родственный родителя span тега, где родители могут быть любые уровни выше span.

Проверить этот скрипт:

function isPTag($el) { 
 
    return $el.prop("tagName").toUpperCase() === 'P'; 
 
} 
 

 
function removeIfPTag($el) { 
 
    if ($el.length > 0 && isPTag($el)) { 
 
    $el.remove(); 
 
    return true; 
 
    } 
 
    return false; 
 
} 
 

 
function removeClosePTag($el) { 
 
    function removePrevious($el) { 
 
    var previous = $el.prevAll(); 
 
    for (var j = 0; j < previous.length; j += 1) { 
 
     current = $(previous[j]); 
 
     if (removeIfPTag(current)) { 
 
     return true; 
 
     } 
 
    } 
 
    } 
 

 
    // Finds `p` in previous elements relative `span` 
 
    if (removePrevious($el)) { 
 
    return true; 
 
    } 
 
    var parents = $el.parents(); 
 
    for (var i = 0; i < parents.length; i += 1) { 
 
    var current = $(parents[i]); 
 
    if (removeIfPTag(current)) { 
 
     return true; 
 
    } 
 

 
    // Finds `p` in previous elements relative to `current` (one of span's parents) 
 
    if (removePrevious(current)) { 
 
     return true; 
 
    } 
 
    } 
 
    return false; 
 
} 
 

 

 
console.log(removeClosePTag($('#first-span'))); 
 
console.log(removeClosePTag($('#second-span'))); 
 
console.log(removeClosePTag($('#third-span'))); 
 
console.log(removeClosePTag($('#fourth-span')));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <p>first p (should remain)</p> 
 
    <p>second p (should delete)</p> 
 
    <div> 
 
    <span id="first-span">first span</span> 
 
    </div> 
 
</div> 
 

 
<div> 
 
    <span id="second-span">second span</span> 
 
    <p>(should remain)</p> 
 
</div> 
 

 
<div> 
 
    <p>third p (should delete)</p> 
 
    <span id="third-span">first span</span> 
 
</div> 
 

 
<div> 
 
    <div> 
 
    <p>fourth p (should remain)</p> 
 
    </div> 
 
    <span id="fourth-span">fourth span</span> 
 
</div>

Обратите внимание, как четвёртую р не удаляется, хотя это выше #fourth-span. Если вы хотите удалить его, вам придется пройти через все дерево DOM над исходным элементом span, что будет дорого для процессора и может легко повесить браузер.