如果子项包含文本,如何删除父项及其子项

时间:2017-01-09 21:25:30

标签: javascript dom

我搜索了许多类似的问题,但似乎无法使其发挥作用。

这是我的HTML:

 <div class="main">
    <p class="nameLink">name1</p>
    <p class="someClass"></p>
  </div>

  <div class="main">
    <p class="nameLink">name2</p>
    <p class="someClass"></p>
  </div>

我想删除包含特定名称的div,例如“name2”。 HTML当前是从javascript文件中追加的,名称来自变量。

以下是我在javascript中尝试过的内容:

var deleteName = "name2";
    $('.main p.nameLink').each(function() {
        if ($(this).text() == deleteName) {                    
          $('.main').has('p:contains(deleteName)').remove()
            return;
      }
    });

我似乎无法删除包含特定文本的div。非常感谢您的帮助。感谢。

3 个答案:

答案 0 :(得分:2)

通过在您的单引号中加入deleteName,它正在寻找包含文字文本p而不是"deleteName"的{​​{1}}。

试试这个:

"name2"

对代码实际评估的内容(评论部分)进行评分:

您的代码段

var deleteName = "name2";
    $('.main p.nameLink').each(function() {
        if ($(this).text() == deleteName) {                    
          $('.main').has('p:contains(' + deleteName + ')').remove();
            return;
        }
});

<强>校正:

  $('.main').has('p:contains(deleteName)').remove()
//$('.main').has('p:contains(deleteName)').remove()
//Searching for text: deleteName

答案 1 :(得分:1)

您的代码有点矫枉过正,您只能使用选择器将其删除,除非您想使用p元素执行特定操作,否则无法使用select()进行循环:

&#13;
&#13;
var deleteName = "name2";
$('.main').has('p.nameLink:contains(' + deleteName + ')').remove();
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="main">
  <p class="nameLink">name1</p>
  <p class="someClass"></p>
</div>

<div class="main">
  <p class="nameLink">name2</p>
  <p class="someClass"></p>
</div>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

您忘记插入deleteName变量。目前原样,您正在检查包含文本deleteName的任何段落标记,而不是通过值name2

您需要使用字符串连接。例如:'string ' + 1 + ' something',产生'string 1 something'

这是你的代码工作:

var deleteName = "name2";
$('.main p.nameLink').each(function() {
  if ($(this).text() == deleteName) {
    $('.main').has('p:contains(' + deleteName + ')').remove()
    return;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="main">
  <p class="nameLink">name1</p>
  <p class="someClass"></p>
</div>

<div class="main">
  <p class="nameLink">name2</p>
  <p class="someClass"></p>
</div>