2015-11-18 2 views
2

Я делаю вызов GET ajax, и он возвращает html в качестве данных.jquery удалить конкретный div в отфильтрованном ответе

Я только хочу вернуть то, что находится в div # product-detail-response, и заменить этот html тем, что находится в div.product-detail-info.

Это работает нормально, но когда я вошел в CMS в качестве администратора, он выплескивает код отладки в конце каждой страницы. Я знаю, что могу отключить эту функцию, но я хотел бы сохранить ее и просто удалить отладку div из ответа.

* ДИВ # отладки-информация существует в DIV # продакт-деталь-ответ

// this displays the html correctly, but it includes the debugging-info that I want removed 
var $response=$(data); 
$(".product-detail-info").html($response.filter('#product-detail-response').html()); 

// I tried adding a remove in different spots of this line without success 
$(".product-detail-info").html($response.filter('#product-detail-response').html()).remove("#debugging-info"); 

* Я также поставил дисплей: нет; для .product-detail-info # debugging-info {} и это:

$("#debugging-info").hide(); 

после вышеуказанного кода.

Ответ:

<div class="product-detail-info"> 
    html and all the stuff I want to show up 
    <div id="debugging-info"> 
     this shows debugging info, and I want to remove this div completely 
    </div> 
</div> 

Мой желаемый ответ:

<div class="product-detail-info"> 
    html and all the stuff I want to show up 
</div> 

AJAX вызов

$.ajax({ 
    url: '/product_detail_ajax/'+entry_id, 
    type: 'GET', 
    data : {}, 
    dataType: 'html', 
    context: this, 
    success: function (data) { 
     var $response=$(data); 
     $(".product-detail-info").html($response.filter('#product-detail-response').html()); 
     $(".breadcrumb-product-title").text($response.filter('#breadcrumb-product-title').text()); 
    }, 
    error: function (data) { 
     // console.log('error'); 
    } 
}); 
+1

Что делать, если вы разделили строки вверх и после добавления содержимого, которое вы просто вызываете '$ ('# debugging-info'). Remove()' в строке ниже? похоже, что он еще не был добавлен в DOM до того, как вы попытаетесь удалить еще даже логически, что это должно быть так. – SidOfc

+0

@SidneyLiebrand Я попробовал $ ('# debugging-info'). Remove(); ниже всего остального это не сработало. – Brad

+1

hmmn ... странно, когда содержимое добавляется в DOM, вы должны просто удалить их так ... возможно, выполните 'console.log ($ ('# debugging-info'). Length)', чтобы увидеть что вы получаете, если результат равен «0», то элемент просто не существует, и вам придется копать глубже, если длина '1', элемент существует, и вы ** должны ** удалять его , вернувшись домой с работы сейчас, но постараюсь поддерживать онлайн в то же время – SidOfc

ответ

0

После того, как вы вводили ответ html в dom, вы можете скрыть информацию отладки , следующим образом:

$response = $(data); 
$(".product-detail-info").html($response.html()).find("#debugging-info").hide(); 

Вот JS Fiddle

+0

Отладочная информация div существует в # product-detail-response – Brad

+1

Вам действительно нужно опубликовать пример «данных» и то, что вы ожидаете от своей страницы, основываясь на этих «данных». Я действительно не понимаю вас, извините – RiccardoC

+0

Обновлен мой ответ с помощью JSFIDDLE – RiccardoC

2

вы на самом деле ве что-то вроде этого:

данные, возвращаемые из вашего звонка

var data = "<div class='product-detail-info'>html and all the stuff I want to show up<div id='debugging-info'>this shows debugging info, and I want to remove this div completely</div></div>"; 

и теперь создать Dóm OBJ манипулировать данными

var parsed = $('<div/>').html(data); 

    parsed.find("#debugging-info").remove(); 

    $("#result").append(parsed.html()); 

FIDDLE

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