Question

我想删除第一次出现的标记，例如出现在元素上方的“p”标记，现在这个标记可以直接在它上面（前一个兄弟），也可以是父母的上一个兄弟。我想在jQuery中执行此操作

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

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

在这两种情况下我都希望从span的角度删除p标签。

Answer 1

您可以使用.prevAll() method和.first()找到与之前最近的<p>兄弟元素。如果结果是一个非空的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 ：

＆＃13;

// loop all p's
$('p').each(function(ndx, elem) {
    // if element has a next sibling
    if ($(elem).next().length > 0) {
    	console.log('removed :', $(elem).text());

    	$(elem).remove(); // remove this <p> tag
      	return false; // break out of loop
    }
})

＆＃13;

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

＆＃13;

Answer 3

我们了解到您要删除p父亲的上一个兄弟span标记，其中父级可以是span以上的任何级别。

检查此脚本：

＆＃13;

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')));

＆＃13;

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

＆＃13;

请注意，即使#fourth-span以上第四个也未被删除。如果你想删除它，那么你必须通过初始span元素之上的整个DOM树，这对于CPU来说是昂贵的，并且可能很容易挂起浏览器。

删除jQuery中的标记

3 个答案: