jQueryでタグを削除する

Question

要素の上に表示される "p"タグのようなタグの最初の出現を削除したいと思います。このタグはすぐ上にある（前の兄弟）か、親の前の兄弟である可能性があります。私はjQueryでこれをやりたいと思います

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

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

私はスパンの観点からpタグを削除したいと思います。

Answer 1

.prevAll() methodと.first()を一緒に使用して、要素に最も近い前の<p>兄弟を見つけることができます。結果が空でないjQueryオブジェクトの場合は、（明らかに）一致しているので、それを削除します。

結果が空のjQueryオブジェクトである場合、一致する兄弟は存在しないため、現在のスパンの親から始めて、ループを使用して必要な限りツリーを上に移動してください。

（あなたが唯一、代わりにprevAll("p").first()の.prev("p")を使用する要素の即時兄弟をテストする場合。）

$("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()兄弟を持っている場合、それを削除し、ループを壊す。私はあなたが親がspan上記のいずれかのレベルができspanタグの親の前の兄弟であるpタグを削除したい理解

// 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

：

このDEMOを参照してください。

チェックこのスクリプト：

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>

第4pが、それは#fourth-span上だにもかかわらず、削除されていないか注意してください。それを削除したい場合は、最初のspan要素の上のDOMツリー全体を調べなければならないでしょう。この要素はCPUには高価であり、ブラウザを簡単にハングさせる可能性があります。