2016-09-03 4 views
0

Я хочу удалить следующий элемент, используя jquery, вот мой код, пожалуйста, проверьте его.Удалить следующий элемент в jquery

<span id="t1">Test 1</span><br/> 
    <span id="t2">Test 2</span><br/> // I want to remove this <br/> 
    <span id="t3">Test 3</span><br/> 

Это код jquery, но это не работает.

$('#t2').next().remove(); 

Я хочу удалить <br/>, который после t2.

+0

$ ('ш') следующий ('ш') удалить();.. используйте этот код – aswathy

+0

Ваш код должен работать как написано. Какая у вас проблема? – Barmar

+0

Ваш формат 'comment' в html неверен. '
' вашего комментария заставляет третий 'span' перейти к следующей строке. Для справки вы можете увидеть мой ответ ниже. –

ответ

0

Попробуйте это:

$(document).ready(function(){ 

    $("button").on("click",function(){ 

     $("#t2").next().remove("br"); 

    }) 
}) 

Окончательный код:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 
    
 
    
 
    <span id="t1">Test 1</span><br/> 
 
    <span id="t2">Test 2</span> <!--I want to remove this--><br> 
 
    <span id="t3">Test 3</span> 
 
    <br><br> 
 
    <button>Remove</button> 
 
    
 
    
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    
 
    <script> 
 
     
 
    $(document).ready(function(){ 
 

 
     $("button").on("click",function(){ 
 

 
      $("#t2").next().remove("br"); 
 

 
     }) 
 
    }) 
 
    </script> 
 
     
 
    </body> 
 
</html>

1

$("#t2").next("br").remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span id="t1">Test 1</span><br/> 
 
<span id="t2">Test 2</span><br/> 
 
<span id="t3">Test 3</span><br/>

Это может помочь вам.

Ваш код JQuery работает нормально, но главная проблема была ваша comment в HTML код

// I want to remove this <br/> 

Это должно быть

<!-- I want to remove this <br/> --> 
+0

Почему это работает по-другому? '.next()' без аргумента просто находит следующий элемент, не проверяя, является ли это 'br', но он все равно должен его найти. – Barmar

+0

Вы действительно думаете, что у него есть этот комментарий в его реальном HTML? Я думаю, это просто вопрос. – Barmar

+1

@Barmar надеюсь, что комментарий добавлен для вопроса, но без этого комментария '.next()' работает так, как ожидалось. поэтому я не уверен – MugiwaraUK

0

Вы должны связать свой код JQuery к какому-то событию , например https://jsfiddle.net/ps2aoey7/

Кроме того, в этом случае вам не нужна следующая функция().

HTML

<span id="t1">Test 1</span><br/> 
    <span id="t2">Test 2<br/> // I want to remove this <br/></span> 
    <span id="t3">Test 3</span><br/> 

вариант JQuery 1 (нажмите события)

$("#t2").click(function() { 
    $('#t2').remove(); 
}); 

JQuery вариант 2 (на странице загрузки)

$(document).ready(function() { 
    $('#t2').remove(); 
}); 
+1

Зачем ему привязывать его к событию клика? Что делать, если он хочет сделать это, когда страница загружена? – Barmar

0

используя nextAll метод позволяет искать через преемники этих элементов в дереве DOM

если один впереди уш элемент

$('#t2').next('br').remove(); 

если не

$('#t2').nextAll('br').remove(); 
+1

Почему? Есть только один '
'. – Barmar

+0

, когда вы работаете для одного или нескольких br, возможно, это может быть более комплексное решение –

+1

'.nextAll (" br "). First()' такое же, как '.next (" br ")' , Зачем вызывать 2 функции, когда одна функция будет делать то же самое? – Barmar

0

Может быть, ваш код работает. Потому что в коде нет ничего плохого. Он должен работать.

Возможно, ваш CSS является реальной проблемой.

Если ваш css установлен для отображения <span> в следующей строке (блок отображения или что-то еще), он не будет показывать эффект кода. Хотя это просто предположение, но лучше проверить это.

И как @Dev и @Sidharth сказали, что лучше сохранить селектор в следующем().

Смежные вопросы